- 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
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Tip 3: Use a Very Wide Header Image to Suit Multiple Screen Widths
For wider viewport sizes, it often makes sense to serve a much wider image than you think you'll need, in order to cater to extra-wide screen monitors. Going back to our masthead example, we could add another couple of media queries:
header {
background: url(small-masthead-image.png);
}
@media all and (min-width: 480px) {
header {
background: url(large-980px-masthead-image.png);
}
}
@media all and (min-width: 980px) {
header {
background: url(very-large-1300px-masthead-image.png);
}
}
@media all and (min-width: 1300px) {
body {
width: 1300px;
margin: 0 auto;
}
}
After the narrow screen layout, we're serving an image 980 pixels wide for viewport widths up to 980 pixels, and then a very wide, 1,300-pixel image for viewport widths from 980 to 1,300 pixels. Then, when the viewport width goes wider than 1,300 pixels, at which point the masthead effect would start to break down, we set a fixed width of 1,300 pixels for the content, and then just center that content in the middle of the available space using the classic old margin: 0 auto trick. This technique should handle most viewport sizes. You're unlikely to have to deal with viewport widths much greater than about 1,980 pixels (at the moment, anyway).