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?
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.
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.
