Media Queries

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

Gallery – a collection of sites using media queries

source – mediaqueri.es
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s