Adaptive CSS layouts using Media Queries
| CSS
(Update 10/10/11) This an old blog post, and is no longer true to the way this site is built. If you would like to read about more current techniques, check out the article on mobile first, responsive design.
Over the past few weeks I have been refining the CSS3 Media Queries on this site in order to try and create an adaptive layout that can scale and resize to any window or screen size, whether it be on desktop, tablet or mobile device. I think (hope) that I've got things flowing pretty smoothly now, so I thought I would post the queries here so that others can adapt them:
<!-- CSS MAIN STYLESHEET -->
<link rel="stylesheet" href="styles.css" media="all" />
<!-- LAYOUTS SMALLER THAN 650px AND MOBILES -->
<link rel="stylesheet" href="mobile.css" media="handheld, screen and (max-width: 650px), screen and (max-device-width: 480px)" />
<!-- LAYOUTS BETWEEN 651px/1024px AND iPAD -->
<link rel="stylesheet" href="tablet.css" media="screen and (min-width:651px) and (max-width: 1024px), screen and (min-device-width: 768px) and (max-device-width: 1024px)" />
I could have included all three media queries inside a single CSS file using the @media rule, but I quite like to keep things separate for simplicity. For now, I have chosen to use three individual stylesheets. The main site stylesheet (styles.css) is used as a master, and then the separate mobile.css and tablet.css stylesheets override certain CSS rules in the main stylesheet, to provide an optimised view that is dependant on the media query being used. I have also used queries based on both min/max-width and min/max-device-width, so that both desktop browsers and intermediate size devices can also make use of the adaptive stylesheets. Have a go at resizing your browser window to see the results.
Like this article? Share on Twitter.