SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive breakpoint em value

    I am just beginning to re work an existing site to become responsive.

    I have this very small and not in any way complete file:
    http://www.openrangeimaging.com/Test/gravity/test.html

    I have a media query set to a break point of 480 pixel. At that point the logo changes size.

    I think the break point should be based on 16px. I think the 480 break point should be 480px/16 = 30em. However to get the break point to engage at 480px I have to use 480px/20 = 24em. Same for the next smaller break point. Should be 320px/16 = 20em but to get the break point to engage at 320px I have to use 320px/20=16em.

    My question - I have font-size: 100% in the body rule. I think the em should be based on 16 and I can't understand why is it being based on 20?

    Any help much appreciated.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    There is no specific relationship between em and pixels. While 16px is the default value in many browsers it doesn't have to be. Also if the person changes their browser zoom setting to anything other than 100% then the relationship between pixels and em will change dynamically.

    If you have a breakpoint that needs to apply at a specific pixel value then use the pixel value to apply it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply Stephen,

    I guess I am confused. My understanding is that em size is related to the containing element, which in this case is Body. Any subsequent containing elements with width assigned would affect the em size within those elements. If the Body element has no assigned width or size and font-size is set to 100% then 1em = 16pixels? I think I have that configuration in my test file.

    em is used for the reason you state, if someone increases the browser font size or zoom factor then all the elements (hopefully <g>) re-size all proportionately to the increased font size?

    I still can't figure out why my em is based on 20. I'm testing this with Chrome.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by markf1 View Post
    to get the break point to engage at 480px I have to use 480px/20 = 24em.
    For me, that breakpoint kicks in when the browser is 384px wide. Perhaps you have zoomed your page and forgotten to reset it? Anyhow, it's a good way to learn about what felgall notes: that ems have nothing to do with pixels.

    I like to use ems for media queries, inspired by this article: http://blog.cloudfour.com/the-ems-ha...a-queries-ftw/

    However, it does require you to take a much more 'flexible' attitude to web design ... something I find most people are not ready for. Most designs I'm asked to code are still locked down to the nth pixel.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph!

    You called it. I had font set to "large" versus "medium" in Chrome. when I re-set to "medium" (I think the default) the break point kicks in at 384px same as for you.

    I have a flexible attitude and want to use em for breakpoints and all widths and I'm striving to be proficient at responsive design. I'm not interested in going back to fixed width and locking down to the nth pixel. the first time I read about responsive design my feeling was wow ... nothing else will do.

    Thanks again to both of you!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Sounds like a good attitude, Mark! Good luck with it. It's a brave new world. Glad we could help.

  7. #7
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post

    I like to use ems for media queries, inspired by this article: http://blog.cloudfour.com/the-ems-ha...a-queries-ftw/
    (
    Very nice article Ralph. Thanks
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •