Media Queries
Media queries, based on css at-rules, help me adapt and deliver my web site to different monitor display sizes, mobile devices, tablets and phones. To see these queries in action, slowly close your browser's window and watch the layout change and adapt to the smaller screen size.
The concept was introduced to me through Joni Korpi's web page, lessframework.com, Ethan Marcotte's article and book, Responsive Web Design, and by reading through several web pages on w3.org's web site (pages are listed below).
Introduction to a simple media query
@media only screen
and (max-width : 1024px) {
body {
width:850px;
font-size:.9em;
}
}
Above is an example of a simple media query that changes the size of my web site width when it is displayed on a screen smaller than 1024 pixels. Try it out… slowly close your browser screen. When you reach 1023 pixels in width, my web site will reduce in size to 850 pixels. You'll also notice that my fonts reduce in size as well.
In order to keep my css file neat and clean, I like to place media queries at the very end (or bottom) of my site's main css file. This is also referred to as placing it "inline."
Designing with flexibility (%) in mind
Oddly enough, all the media query does is reduce the width of the body and reduce every font on your web site by 90% (.9em). The rest of the site automatically reduces because I built my site using mostly percentages for horizontal widths, instead of fixed pixels.
For example, the type you are currently reading is place in a div labeled <div id="article">. The article div is styled with the following css:
#article {
width:77%;
float:left;
padding:20px 1.5% .5em 2.5%;
}
So, when the media query above detects a display less than 1024 pixels, it reduces the width of my web page to 850 pixels. In turn, the article width, which was initially set at 77% of 1000 pixels, changes to 77% of 850 pixels. The rest of the page's divs reduce too, because their sizes are based on percentages as well.
Pretty cool!
Other media queries
Here are several other media queries that I've used to deliver my sites to handheld and tablet devices.
/* iPad 1&2 (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* iPad 1&2 (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* iPhone, iPod touch 4, high-res smartphones ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
The iPad 3 is coming out and the resolution is going to be 1920 x 1080 pixels. The media queries I'll be trying are as follows:
/* iPad 3 (landscape) ----------- */
@media only screen
and (min-device-width : 1080px)
and (max-device-width : 1920px)
and (orientation : landscape) {
/* iPad 3 (portrait) ----------- */
@media only screen
and (min-device-width :1080px)
and (max-device-width : 1920px)
and (orientation : portrait) {
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
Samples of Media Queries in Action
The web sites listed below currently use media queries to change how its web pages look when viewed on different screen sizes and devices. Check out the css for each site and see how it works. View each site on an iPad, iPhone, iPod, or smartphone and see how they change.
- www.westerntc.edu/graphicdesign
- www.craigkunce.com (this site)