Blog

CSS for Mobile Devices - Media Query Essentials

In the modern age of web design, understanding media queries is essential if you want the website to be functional on multiple devices platforms. Media queries allow you to conditionally apply CSS selectors based upon the view port, screen size and resolution.

Implementation Theory - Smallest to Largest

The most common implementation theory for responsive website design is the mobile first approach. The concept is you start with the smallest screen and build your core CSS file for those dimensions. Then, for each subsequently larger screen size, you add media queries and additional CSS selectors. Applying selectors from the smallest to largest screen size allow you to minimize the bandwidth requirements for the smartphones by including only small, low-resolution images while allowing for large, high-resolution images to be included on larger screens.

Media Query Syntax

Media queries are implemented using the @media css selector followed by the constraints. The CSS selectors to be applied to the media query are grouped within curly brackets, just like any other CSS selector.

@media (max-width:461px) and screen {

  body { background-color:red; }

}

This would change the background of the body element to red for screen sizes smaller than 461px.

If all of the conditions are true then the media query results to true and the content is applied to the page. Individual constraints can be coupled together with the AND keyword to require multiple constraints to be true. Multiple sets of constraints can be coupled together using a comma separated list (just like multiple CSS selectors) to apply a logical OR situation. Unless otherwise specified, the "all" media type is added to all media query sets, which means an empty set is the same as having no media query wrapper and the selectors are applied in all situations.

Constructing Media Queries

Media query constraints use some of the CSS properties and add a few more to be applicable on the device level. Note, constraints do not always need a value to be applied.

Viewport

The view port is the box in which the page is constructed. This is not always the same as the device width or the browser width. Users can set automatic zoom features which change the ratio between the browser width and the viewport, causing web developers headaches. You can set a scaling ratio for the viewport using the media tag in the html head section.

Constraints

Constraint Value* Effect
all - Apply to all media types. This is the default behavior of any media query, so it is only needed when using complex constraints.
screen - Apply to only screen media types
print - Apply to only print media types. This is useful for creating a custom layout when a visitor want to print the site
handheld - Apply to only handheld media types.
only - Limits application of the media query, particularly in the situation of older browsers which do not properly support the queries, as these browsers do not recognize the keyword, causing an error in the processing.
not - Apply to all situations except the identified one.
width px/em/cm Limit to browsers with a specific RENDERING width. This turns out to be less useful than min-width or max-width.
min-width px/em/cm  Limit to browsers with a RENDERING width of at least the set amount. Used when applying media queries from smallest to largest.
max-width px/em/cm Limit to browsers with a RENDERING width up to set amount. Used when applying media queries from largest to smallest, or to further constrain selectors when used with min-width.
height px/em/cm Limit to browsers with a specific RENDERING height. This turns out to be less useful than min-height or max-height. Height is not often used since width can often dictate the specific device and height becomes less important for vertically scrolling pages.
min-height px/em/cm Limit to browsers with a RENDERING height of at least the set amount.
max-height px/em/cm Limit to browsers with a RENDERING height up to set amount.
device-width px/em/cm Limit to browsers with a specific SCREEN width. This turns out to be less useful than min-device-width or max-device-width.
min-device-width px/em/cm Limit to browsers with a SCREEN width of at least the set amount. Used when applying media queries from smallest to largest.
max-device-width px/em/cm Limit to browsers with a SCREEN width up to set amount. Used when applying media queries from largest to smallest, or to further constrain selectors when used with min-device-width.
device-height px/em/cm Limit to browsers with a SCREEN height of at least the set amount.
min-device-height px/em/cm Limit to browsers with a SCREEN height of at least the set amount.
max-device-height px/em/cm Limit to browsers with a SCREEN height up to set amount.
orientation portrait landscape Limit to browsers with a particular orientation. This effectively only used when dealing with mobile devices which are orientation conscious.
aspect-ratio ratio Limit to a ratio between the "width" and the "height" values. 
min-aspect-ratio ratio Limit to a minimum ratio between the "width" and the "height" values.  
max-aspect-ratio ratio Limit to a maximum ratio between the "width" and the "height" values.
device-aspect-ratio ratio Limit to a ratio between the "device-width" and the "device-height" values. Common values include 1/1, 4/3, 5/3, 16/9, 16/10.
min-device-aspect-ratio ratio Limit to a minimum ratio between the "device-width" and the "device-height" values. 
max-device-aspect-ratio ratio Limit to a maximum ratio between the "device-width" and the "device-height" values.
resolution dpi/dpcm Limit to devices with a specified resolution. dpi = dots per CSS inch, dpcm = dots per CSS centimeter.
min-resolution dpi/dpcm Limit to devices with a minimum resolution.
max-resolution dpi/dpcm Limit to devices with a maximum resolution.
color -/integer Limit to a specific color depth per component. For example, 0 would indicate monochrome while 2 would indicate 8 bit colors (256-color palette) and 8 indicates the standard full RGB palette.
min-color integer Limit to a minimum color depth per component.
max-color integer Limit to a maximum color depth per component.
color-index -/integer Limit to a specific total color depth. For example, 1 would be monochrom while 8 would indicate 8 bit colors (256-color palette) and 24 indicates the standard full RGB palette.
min-color-index integer Limit to a minimum total color depth. This is must effective at displaying different background images based upon the displayable colors, saving bandwidth on monochrome and greyscale displays.
max-color-index integer Limit to a maximum total color depth.
monochrome -/integer Limit to a specific greyscale color depth on a monochrome device. This is valuable when creating a custom display for printing out the page.
min-monochrome integer Limit to a minimum greyscale color depth.
max-monochrome integer Limit to a maximum greyscale color depth.
scan progressive interlace Limits to TV media with progressive scanning or interlace scanning. Seldom used.
grid -/0/1 Limit to displays running on a pure grid. Seldom used.

* Dashes (-) indicate the value can be omitted and still work fine.

Legacy and Browser-Specific Constraints

Legacy Constraint Browser Modern Constraint
-moz-images-in-menus Firefox 3.6+ none; Used to determine if images can appear in menus. Accepts 0/1. Corresponds to constraint "-moz-system-metric(images-in-menus)".
-moz-mac-graphite-theme Firefox 3.6+ none; Used to determine if user is using the "Graphite" appearance on Mac OS X. Accepts 0/1.Corresponds to constraint "-moz-system-metric(mac-graphite-theme)".
-moz-device-pixel-ratio -webkit-device-pixel-ratio Firefox 4-15 resolution
-moz-os-version Firefox 25+ none; Used to determine which operating system is running the browser. Currently only implemented on windows, with values of "windows-wp", "windows-vista","windows-win7","windows-win8"
-moz-scrollbar-end-backward Firefox 3.6+ none; Used to determine if user's interface displays a backward arrow at the end of the scrollbar. Accepts 0/1. Corresponds to constraint "-moz-system-metric(scrollbar-end-backward)".
-moz-scrollbar-start-forward Firefox 3.6+  none; Used to determine if user's interface displays a forward arrow at the start of the scrollbar. Accepts 0/1. Corresponds to constraint "-moz-system-metric(scrollbar-start-forward)".

Screen Sizes

Device Display (WxH) Viewport (WxH) Resolution Render
iPhone 2G, 3G, 3GS 320x480 320x480   163 dpi 1 dppx
iPhone 4, 4S 640x960 320x480  326 dpi 2 dppx
iPhone 5, 5C, 5S 640x1136 320x568 326 dpi 2 dppx
iPhone 6 750x1334 375x667 326 dpi 2 dppx
iPhone 6 Plus 1080x1920 414x736 401 dpi 3 dppx
iPad, iPad 2 768x1024 768x1024  132 dpi 1 dppx
iPad Air, iPad Air 2 1536x2048 768x1024 264 dpi 2 dppx
iPad mini 2, 3  1536x2048 768x1024 326 dpi 2 dppx
iPad mini 768x1024 768x1024  163 dpi 1 dppx
iMac 2560x1440 2560x1440 109 dpi 1 dppx
iMac Retina 5120x2880 5120x2880 218 dpi 1 dppx
MacBook Pro Retina -13.3" 2560x1600 1280x800 227 dpi 2 dppx
MacBook Pro Retina -15.4" 1800x2880 900x1440 220 dpi 3 dppx
Galaxy Nexus 720x1280 720x1280 316 dpi 1 dppx
Galaxy Mini 2 320x480 320x480 176 dpi 1 dppx
Galaxy S3 720x1280 360x640 306 dpi 2 dppx
Galaxy S4 1080x1920 360x640 441 dpi 3 dppx
Galaxy S5 1080x1920 360x640  432 dpi 3 dppx
Galaxy Tab 7 Plus 600x1024 600x1024  169 dpi 1 dppx
Galaxy Tab 8.9 800x1280 800x1280  169 dpi 1 dppx
Galaxy Tab 10.1 800x1280 800x1280 149.45 dpi 1 dppx
Google Nexus 4 768x1280 768x1280  318 dpi 1 dppx
Google Nexus 5 1080x1920 360x640 445 dpi 3 dppx
Google Nexus 6 1440x2560 1440x2560  493 dpi 1 dppx
Google Nexus 7 1200x1920 600x960 323 dpi 2 dppx
Google Nexus 9 1536x2048 1536x2048  288 dpi 1 dppx
Google Nexus 10 1600x2560 800x1280 300 dpi 2 dppx
HTC Evo 480x800 480x800 217 dpi 1 dppx
HTC One V 480x800 480x800 252 dpi 1 dppx
HTC One X 720x1280 720x1280 312 dpi 1 dppx
HTC One 1080x1920 360x640 469 dpi 3 dppx
HTC One Mini 720x1280 720x1280  342 dpi 1 dppx
HTC One Max 1080x1920 1080x1920  373 dpi 1 dppx
HTC Pure 480x800 480x800  292 dpi 1 dppx
HTC Desire Z, T-Mobile G2 480x800 480x800 252 dpi 1 dppx
Blackberry Q5, Q10 720x720 360x360 330 dpi 2 dppx
Blackberry Z10 768x1280 384x640 356 dpi 2 dppx
Blackberry Z30 720x1280 360x640 295 dpi 2 dppx
Blackberry Passport 1440x1440 1440x1440 453 dpi 1 dppx
Lumia 520, 521 480x800 480x800 233 dpi 1 dppx
Lumia 620 480x800 480x800 246 dpi 1 dppx
Lumia 625 480x800 480x800 199 dpi 1 dppx
Lumia 720, 820, 822 480x800 480x800 217 dpi 1 dppx
Lumia 920, 928, 1020 768x1280 480x800 332 dpi 1.6 dppx
Moto X 720x1280 360x640 312 dpi 2 dppx
Moto G 720x1280 360x640 326 dpi 2 dppx
Kindle Fire 600x1024 600x1024 169 dpi 1 dppx
Kindle Fire HD - 7" 800x1280 800x1280 216 dpi 1 dppx
Kindle Fire HD - 8.9" 1200x1920 1200x1920 254 dpi 1 dppx
Kjndle Fire HDX - 8.9" 1600x2560 1600x2560 339 dpi 1 dppx
Kindle Fire HDX - 7" 1200x1920 1200x1920 323 dpi 1 dppx
Surface 768x1366 768x1366 148 dpi 1 dppx
Surface 2, Pro, Pro 2 1080x1920 1080x1920 208 dpi 1 dppx
Surface Pro 3 1440x2160 1440x2160 216 dpi 1 dppx
Yoga 2 Pro 1800x3200 1800x3200 276 dpi 1 dppx
ThinkPad Edge E531 1920x1080 1920x1080 141 dpi 1 dppx
IdeaPad U310 1366x768 1366x768 118 dpi 1 dppx
UltraSharp UP2414Q 3840x2160 3840x2160 185 dpi 1 dppx
UltraSharp U2412M 1920x1200 1920x1200 94 dpi 1 dppx
UltraSharp U2414H 1920x1080 1920x1080  93 dpi 1 dppx

If you set the viewport scale to 1, the display dimension is the maximum size of an image you want to include while the viewport dimension is the one you use for your media queries.

In  Practice

It is not practical to create a media query for every single device, specifying its particular dimensions and resolution. Creating a set of breakpoints allow you to format a group of devices, instead of each individual device/screen. Also, setting the viewport scale to 1, simplifies all the artificial display dimensions into a handful of sizes. Adding a min-resolution constraint allows for special styling for those high resolution smart phones.

To assist in the development process, we start with a mobile framework which already has the major break points identified.

Download our framework

Reference

The specifications for media queries can be found at: