Media Queries

About

Imagine the possibility that you could control how your website is displayed when someone visit it in a smartphone or in a tablet, that is an awesome feature that it will do your visitors love you!

Well, media queries, are an excellent way to change styles (images, backgrounds, colors, height, width, spacing, etc.) depending of the device that you are using to visit a website. This kind of techniques improve a lot the user experience and create a better opinion in your visitors about your site.

Since inclusion of new devices like smartphones or tablets, users have changed the way that they use web portals, right now thousands of people prefer to visit a website from their mobile device instead of use a personal computer, for this reason is too important create or adapt our pages to render them correctly and friendly on these devices. So, if you want to improve the user experience in your website maybe media queries will be really useful to give different "sights" to your visitors. 

About media queries support 

If you are asking yourself which web browsers support media queries you could find the next table very useful (for more details please visit: http://caniuse.com/#feat=css-mediaqueries):

Figure 1. CSS3 media queries support in different web browsers.

As you can see, the support is really good and maybe you are thinking about what happens with Internet Explorer, well, don't worry about that because almost all devices (smartphones or tablets) have a good web browser and probably you won't never have problems with this situation.

How to detect different devices

Following list is an update of media queries we can use, please visit the original source to thank the author Andi LiciousResponsive Webdesign – CSS3 Media Queries – CSS-Template for browsers and mobile devices and download the CSS for your own project: css_responsive_template.css

/* --------------------------------------------------------- */
/* BASIC CSS ----------------------------------------------- */
/* --------------------------------------------------------- */
 
    /* YOUR STYLES */
 
 
 
 
 
 
/* --------------------------------------------------------- */
/* MEDIA QUERIES ------------------------------------------- */
/* --------------------------------------------------------- */
 
 
/* --------------------------------------------------------- */
/* INFORMATION --- Version 1.1 --- 2012-VII-05 ------------- */
/* --------------------------------------------------------- */
 
/* ###
 
1.) Use e.g. "Respond.js" by Scott Jehl to enable responsive web designs in browsers that don't support CSS3 Media Queries (e.g. Internet Explorer 6, 7, 8) --> https://github.com/scottjehl/Respond/
 
2.) In this case, I use stages for all sizes. Between 1001 pixel and 1249 pixel the browser uses your basic-CSS. You can always delete some stages. After check the stages and adjust some min/max widths. (e.g. If you want to use only one stage for smartphones up to 320 width and one stage for smartphones and devices up to 960 pixel, delete the stages between and set the two new stages for a larger range.)
 
3.) If you think "Oh, the iPhone 4 has a 640x960 pixel display, so my stage needs only to fit on this in portrait and landscape orientation", it's a trap. The iPhone 4 has this resolution, but it uses only 320x480 pixel device-width. Or the Samsung Galaxy S2. It has a 480x800 pixel display --> 320x450 pixel and 320x508 pixel device-width in portrait orientation / 533x237 pixel in width and device-width in landscape orientation. // Quick Tip: "Tablet Computer - 150+ Display Measurements" --> http://www.designfalcon.com/#tablets
 
4.) Think about PNG-Fix for old IE (e.g. "jquery.pngFix.js" by Andreas Eberhard --> http://jquery.andreaseberhard.de/pngFix/), IE Background-Fix (e.g. "backgroundSize.js" by Louis Remi --> https://github.com/louisremi/jquery.backgroundSize.js) and last but noch least a emulator for CSS3 pseudo classes and attribut selectors for old IE (e.g. "Selectivizr.js" by Keith Clark --> http://selectivizr.com/).
 
5.) More information about "max-width" and "max-device-width": "max-width" refers to the actual viewport and can target specific sizes and orientations; "max-device-width" refers to the device viewport size, regardless of browser-scale, orientation or resizing. Shorthand: "max-width" (and "max-height") = target display area // "max-device-width" (and "max-device-height") = device entire rendering area. Same for "min" values.
 
6.) Thanks for your time! (: Andi "Licious" Wieser (Oh, you have some time left or further questions? --> andilicious.com // twitter.com/andiliciouscom // fb.com/andiliciouscom // pinterest.com/licious).
 
### */
 
 
 
 
/* --------------------------------------------------------- */
/* APPLE MACBOOK PRO RETINA ETC. --------------------------- */
/* --------------------------------------------------------- */
 
/* Retina Displays/Screens (2880x1800) --------------------- */
@media
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
}
 
 
 
 
/* --------------------------------------------------------- */
/* SMARTPHONES, TABLETS & TINY DESKTOPS -------------------- */
/* --------------------------------------------------------- */
 
/* Old Smartphones (portrait and landscape) ---------------- */
@media
only screen and (min-device-width: 240px) and (max-device-width: 320px) {
    /* YOUR STYLES */
}
 
 
/* Old Smartphones (e.g. portrait) ------------------------- */
@media
only screen and (max-width: 319px) {
    /* YOUR STYLES */
}
 
 
/* Smartphones (portrait and landscape) -------------------- */
@media
only screen and (min-device-width: 320px) and (max-device-width: 640px) {
    /* YOUR STYLES */
}
 
 
/* Smartphones (portrait) & Old SP (landscape) ------------- */
@media
only screen and (min-width: 320px) and (max-width: 479px) {
    /* YOUR STYLES */
}
 
 
/* Smartphones (landscape) & Old Tablets (Portrait) -------- */
@media
only screen and (min-width: 480px) and (max-width: 639px) {
    /* YOUR STYLES */
}
 
 
/* Smartphones & Tablets (portrait & landscape) ------------ */
@media
only screen and (min-device-width: 640px) and (max-device-width: 960px) {
    /* YOUR STYLES */
}
 
 
/* Smartphones & Tablets (portrait) & Tiny Desktops -------- */
@media
only screen and (min-width: 640px) and (max-width: 799px) {
    /* YOUR STYLES */
}
 
 
/* Smartphones & Tablets (landscape) & Splitted Desktops --- */
@media
only screen and (min-width: 800px) and (max-width: 1000px) {
    /* YOUR STYLES */
}
 
 
 
 
 
/* --------------------------------------------------------- */
/* DEVICES BY RATIO ---------------------------------------- */
/* --------------------------------------------------------- */
 
/* LowRes (e.g. 240x320 / 320x480) ------------------------- */
@media
only screen and (min--moz-device-pixel-ratio: 0.75),
only screen and (-o-min-device-pixel-ratio: 3/4),
only screen and (-webkit-min-device-pixel-ratio: 0.75),
only screen and (min-device-pixel-ratio: 0.75),
only screen and (min-resolution: 0.75dppx) {
    /* YOUR STYLES */
}
 
 
/* HighRes ------------------------------------------------- */
@media
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx) {
    /* YOUR STYLES */
     
    /* e.g. HighRes Logo (use _2x as extension for double-sized images) */
    /* .logo {background-image: url(logo_2x.png); background-size: 50%;} */
}
 
 
/* RetinaRes Smartphones (e.g. iPhone 4 / portrait) -------- */
@media
only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: portrait),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-resolution: 1.5dppx) and (orientation: portrait) {
    /* YOUR STYLES */
}
 
 
/* RetinaRes Smartphones (e.g. iPhone 4 / landscape) ------- */
@media
only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: landscape),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: landscape),
only screen and (min-resolution: 1.5dppx) and (orientation: landscape) {
    /* YOUR STYLES */
}
 
 
 
 
 
/* --------------------------------------------------------- */
/* IPADS --------------------------------------------------- */
/* --------------------------------------------------------- */
 
/* iPads (portrait and landscape) -------------------------- */
@media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* YOUR STYLES */
}
 
 
/* iPads (portrait) ---------------------------------------- */
@media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* YOUR STYLES */
}
 
 
/* iPads (landscape) --------------------------------------- */
@media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* YOUR STYLES */
}
 
 
/* iPad Retina (iPad 3; portrait and landscape) ------------ */
@media
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-device-pixel-ratio: 2),
only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-resolution: 2dppx) {
    /* YOUR STYLES */
}
 
 
 
 
 
/* --------------------------------------------------------- */
/* COMPUTERS / OTHER DEVICES ------------------------------- */
/* --------------------------------------------------------- */
 
/* Displays/Screens (e.g. MacBook @ 1280x800) -------------- */
@media
only screen and (min-width: 1250px) and (max-width: 1409px) {
    /* YOUR STYLES */
}
 
 
/* Displays/Screens (e.g. 19" WS @ 1440x900) --------------- */
@media
only screen and (min-width: 1410px) and (max-width: 1649px) {
    /* YOUR STYLES */
}
 
 
/* Displays/Screens (e.g. 22" WS @ 1680x1050) -------------- */
@media
only screen and (min-width: 1650px) and (max-width: 1889px) {
    /* YOUR STYLES */
}
 
 
/* Displays/Screens (e.g. 24" WS @ 1920x1080) -------------- */
@media
only screen and (min-width: 1890px) and (max-width: 2529px) {
    /* YOUR STYLES */
}
 
 
/* Really Large Displays/Screens (e.g. 2560x1440) ---------- */
@media
only screen and (min-width: 2530px) {
    /* YOUR STYLES */
}

The next list of media queries are necessary to detect several devices (even in portrait and landscape orientation), thanks to CSS Tricks:

I would recommend to use media queries described above (from Andi Licious). Why? Because is a more complete list of media queries.

Media queries
/* 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 ----------- */
@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

/* iPhone iPhone < 5 ----------- */
@media screen and (device-aspect-ratio: 2/3) {
/* Styles */
}

/* iPhone iPhone 5 ----------- */
@media screen and (device-aspect-ratio: 40/71) {
/* Styles */
}

/* iPhone iPhone 6 ----------- */
@media screen and (device-aspect-ratio: 667/375) {
/* Styles */
}

/* iPhone iPhone 6 Plus ----------- */
@media screen and (device-aspect-ratio: 16/9) {
/* Styles */
}

Media queries in Bootstrap 3.x

As you probably know, the new approach in Bootstrap 3.x is "mobile first", for that reason media queries have changed in this version:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Media queries in Bootstrap responsive 2.x

Nowadays, Bootstrap is one of the most used CSS frameworks and it includes a responsive version called Bootstrap Responsive, you could download this from its official website. Bootstrap Responsive uses the next media queries in order to change the layout of your site:

Media queries used by Bootstrap Responsive
@media (min-width: 768px) and (max-width: 979px) {
}
@media (max-width: 767px) {
}
@media (min-width: 1200px) {
}
@media (max-width: 480px) {
}
@media (min-width: 980px) {
}

About the author

Enterprise Web Developer

Alex is an experienced technology professional. His background includes:

  • Web Technologies: Semantic Web (RDF, OWL), MVC Frameworks (CakePHP, CodeIgniter) Content Management Systems (Drupal, Joomla, WordPress), JavaScript libraries (jQuery, Mootools), CSS3, HTML5, mobile web (Sencha, jQuery mobile), Operating Systems, and,
  • Research: Complex Systems (Cellular Automata in specific), Artificial Intelligence, Computer Graphics and Computer Simulation to create computer models of living.