CSS3

Media Queries

Media queries are CSS3 rules that allow a page to query different attributes from the device used to call the page so that the presentation can be taylored specifically to the user's device screen size. Media queries allows a website's presentation to become device independent. It is the basis of building responsive websites with adaptable displays based on the calling devices attributes. Media features are information about the calling devices that can be used to determine it capabilities. The following list are the current media features available to query a devices attributes.

Media features


This stood out because previously the only way to create a responsive website was to use style sheet frameworks like bootstrap. With media queries it is very easy to do it yourself.
W3.org on media queries
Listing 1: This listing shows how to use one sytlesheet for mobile and another for desktops
                        
                            <link href="mobile.css" rel="stylesheet">
                            <link href="desktop.css" rel="stylesheet" media="(min-width: 600px)">