- Tip 1: Use 'Mobile First' Media Queries
- Tip 2: Support Older IE Versions with a Polyfill
- Tip 3: Use a Very Wide Header Image to Suit Multiple Screen Widths
- Tip 4: Use Viewport Meta Sparingly, and Let Users Zoom
- Tip 5: Serve Larger Images for High-Resolution Displays
- Tip 6: Avoid Using Images and Other Separate Asset Files
Tip 2: Support Older IE Versions with a Polyfill
One problem with using the "mobile first" technique is that older browsers that don't support media queries will be stuck with the mobile/narrow screen layout, because that's the default layout, applied before any media queries kick in. This really isn't what you want for IE 6–8 on the desktop!
- css3mediaqueries.js is larger, but it supports a wider range of queries.
- respond.js is smaller, but it supports only width and height media queries.
Basically, you should use respond.js unless you need wider media query support.