SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Units - Best Measurement Value

    Hi All,

    Question
    What is the best CSS unit (measurement value) to use today (given that users are increasingly engaging with websites on mobile devices (e.g. iPhones, Android phones)? I guess the follow-on question is, can one build a website using one measurement value, or should one use a combination of values?

    Any advice or opinion is welcomed.

    Warm regards,

    HJR

    Context to Question
    See - CSS Units

    I am new to website design and just finished reading Build Your Own Web Site the Right Way. I'm a 'newbie' as Ian Lloyd would have me describe myself. I understand that web design for mobile technology has advanced a great deal since the book was published (second edition - November 2008). I couldn't help but wonder if the proliferation of web use on mobile devices has prompted a trend towards the use of a particular CSS unit (measurement value).

    I ask because I'm keen to start my web site building on the right foot.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi, Welcome to Sitepoint

    This is an age old question and there is no simple answer I'm afraid.

    Whether you use pixels or ems doesn't really make any difference as far as various screen sizes are concerned if you are setting fixed widths. A fixed width will not adapt to window sizes whether it is in ems or pixels.

    Ems will allow the element to scale better when resized by the user and will ensure that most elements (apart from pixel based content such as images) will scale uniformly and maintain the same sort of layout. However ems won't help the layout fit on a smaller or larger screen any better than pixels would.

    Designing with ems is also a little more complicated as you need to take more care and allow breathing space for rounding issues but ems are generally regarded as the best unit to use.

    To fit most screen sizes you would need to create a fluid width layout (or elastic layout with min and max-widths). This would allow the layout to adjust to fit the device assuming that you have coded all the elements so that they can fit nicely (e.g. if you have a 1200px wide image in the middle of the page then its not going to fit anything smaller unless you scale the image or offer a smaller image via media queries).

    Using percentages will allow the container to expand with the viewport but again does need to be combined with min and max-widths otherwise it eventually becomes too small or too large for its content.

    These days the buzzword is responsive web design and using media queries you can set up different layout styles depending on the width of the browser.

    A better approach is to cater for the lowest common denominator first and then add enhancements for better browsers second. This article explains it in detail.

    You'll find some relevant information on font-sizing in this thread which explains the issues with ems/px etc.

  3. #3
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B.

    I very much appreciate the in-depth answer. I'm particularly grateful for the links to further reading.

    All the best


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
  •