Displaying a web page that fits the users screen is vital. Realistically, you need to render your site for a smartphone and as high as 1920px!
That’s a huge range, and the number of options to do this is thankfully increasing.
Adapt.js – Adaptive CSS
The only drawback is the number of CSS files you have to provide:
- mobile.css – below 760px
- 720.css – 760 to 980px
- 960.css – 980 to 1280px
- 1200.css – 1280 to 1600px
- 1560.css – 1600 to 1920px
- fluid.css – 1920px and higher
There is a potential to have your site rendered with a brief flash of unstyled content while the correct stylesheet is being retrieved.
I have done my best to mitigate this by keeping CSS files small (3 KB). It is worth noting this is a proposed, not prescribed, approach to a problem with multiple solutions.
If you are already sporting the 960 Grid System or are fairly familiar with it, this may be a viable option to get your site to look good on multiple resolutions.