In the past, in order to create layouts based upon the width of the user’s browser, we had to use JavaScript — perhaps combined with a server-side language. Fortunately, the process is now becoming far simpler, thanks to CSS media queries.
Subscribe to our YouTube page to watch all of the video tutorials!
Prefer to watch this video on Screenr?
Method 1: Within your Stylesheet
@media screen and (min-width : 1200px) {
/* let's do somethin' */
}
Method 2: Import from within your Stylesheet
@import url( small.css ) screen and ( min-width: 1200px );
Note that you can also add addition rules, by applying a comma — much like you would when using multiple selectors.
Method 3: Link to a Stylesheet
<link rel="stylesheet" media="screen and (min-width: 1200px)" href="small.css" />
Method 4: Targeting the iPhone
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" />
An interesting note, after a bit of research around the web, is that, despite the fact that iPhone 4 sports a resolution of 640×960, it still we pick up mobile.css, referenced in the code above. How strange? If you have more information on this, please leave a comment for the rest of us!
Browsers that Support CSS Media Queries
- Firefox 3.5+
- Opera 9.5+
- Safari 3+
- Chrome
- Internet Explorer 9+
Please note that Internet Explorer 8 and below do not support CSS media queries. In those cases, you should use a JavaScript fallback.