What is Media Queries?
Media Queries is a W3C Candidate Recommendation—a widely reviewed document which is ready for implementation by browser vendors.
It's an extension of media dependent stylesheets tailored for different media types (i.e. screen and print) found in CSS2.
In its essence a media query consists of a media type and an expression to check for certain conditions of a particular media feature. The most commonly used media feature is width.
By restricting CSS rules to a certain width of the device displaying a web page, one can tailor the page's representation to devices (i.e. smartphones, tablets, netbooks, and desktops) with varying screen resolution.
What is Responsive Web Design?
The term Responsive Web Design was coined by Ethan Marcotte and is the practice of using fluid grids, flexible images, and media queries to progressively enhance a web page for different viewing contexts.
What screen resolutions do you use while taking screenshots?
Smartphone
320px
Tablet
768px
Netbook
1024px
Desktop
1600px
