Eleventy in a Box
A premium Eleventy starter kit for designers and developers who want to spend less time setting up the same project structure and more time designing websites.
Hardboiled CSS3 Media Queries
This entry has been deprecated: Please use 320 and Up instead. Making layouts responsive using CSS3 Media Queries are a big part of the work that I’m doing for the Hardboiled Web Design site in the run up to the book’s launch.
Since I started using Media Queries extensively over the last few months, I’ve revised the queries several times for each project, so it made sense to build a boilerplate to use as a starting point. These hardboiled CSS3 Media Queries are empty placeholders for targeting the devices and attributes I’m interesting in making responsive designs for right now.
They’re part of a wider toolkit that I’ll be releasing at the same time as the book. But for now, you can download and incorporate these override queries at the bottom of your existing CSS files. Download the CSS file
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- /
@media only screen
and (min-width : 321px) {
/ Styles */
}
/* Smartphones (portrait) ----------- /
@media only screen
and (max-width : 320px) {
/ Styles */
}
/* iPads (portrait and landscape) ----------- /
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/ Styles */
}
/* iPads (landscape) ----------- /
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/ Styles */
}
/* iPads (portrait) ----------- /
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/ Styles */
}
/* Desktops and laptops ----------- /
@media only screen
and (min-width : 1224px) {
/ Styles */
}
/* Large screens ----------- /
@media only screen
and (min-width : 1824px) {
/ Styles */
}
/* iPhone 4 ----------- /
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/ Styles */
}
Of course, you might not want all your responsive design styles inside one huge stylesheet. If that’s the case, you can serve alternative stylesheets using the same queries as attributes on your link elements.
<head>
<link rel="stylesheet" href="smartphone.css"
media="only screen and (min-device-width : 320px)
and (max-device-width : 480px)">
<link rel="stylesheet" href="smartphone-landscape.css"
media="only screen and (min-width : 321px)">
<link rel="stylesheet" href="smartphone-portrait.css"
media="only screen and (max-width : 320px)">
<link rel="stylesheet" href="ipad.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)">
<link rel="stylesheet" href="ipad-landscape.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)">
<link rel="stylesheet" href="ipad-portrait.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)">
<link rel="stylesheet" href="widescreen.css"
media="only screen and (min-width : 1824px)">
<link rel="stylesheet" href="iphone4.css"
media="only screen
and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)">
</head>
Download the CSS file and any comments or suggestions for future improvements would be more than welcome.
Sign-up for email alerts or follow @itshardboiled for more updates and sneak previews.
October 2, 2010 • Andy Clarke • Loose talk