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: http://www.w3.org/TR/css3-mediaqueries/ https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag https://www.apple.com/ipad/compare/ http://support.apple.com/kb/sp622 https://www.apple.com/iphone/compare/   }