Write For Us!Expose your content to our readers! [More Information]

[GUIDE] A Beginners Guide to CSS3 Media Queries

Responsive Web Design with Media Queries

Responsive web design refers to progressively enhancing a web page for different viewing contexts (such as smartphones and tablets) through the use of coding including fluid layouts, flexible images, and media queries.

So, What’s a Media Query?

A Media Query is made up of a media type (such as screen) and a logical expression that determines the capability of the device that the browser is running on, such as screen resolution and orientation (portrait or landscape), according to the W3C.  When the media query equals true, the media query directs the browser to CSS you have coded and configured specifically for those capabilities.

Media Queries using a Link Element

<link href="mobilestyle.css" rel="stylesheet" media="only screen and (max-width: 480px)">

Above is an example of using an @media tag inside of a link element.  This will direct browser to an external stylesheet that has been configured for optimal display on the most popular smartphones.  “Only” is used at the beginning of this media tag.  This tells the browser to hide the media query from outdated browsers.  “Screen” targets devices with screens.

“Max-width” tells this media tag to target screens up to a size of 480 pixels wide.  Once it passes this mark it will no longer use that @media tag.  There are many different sizes for smartphone screens – but the most popular size is 480px for the most popular devices in landscape display.  A media query may test for both minimum and maximum values.  For example:

<link href="tabletstyle.css" rel="stylesheet" media="only screen and (min-wdith: 768px)
 and (max-width: 1024px)">

Media Queries using an @media Rule

Another method of using media queries is to code them directly in your CSS using an @media rule.  Have a look at the code below to see an example and explanation of this method.

@media only screen and (max-width: 480px) {
     header { background-image: url(mobile.gif);
     }
}

We begin by coding @media follow by the media type and logical expression. Then enclose the desired CSS selector(s) and declaration(s) within a pair of braces.

 

Tutorials coming soon on how to use media queries for responsive design.

Commonly Used Media Query Features
Features Values Criteria
max-device-height Numeric value The height of the screen size of the output device in pixels is smaller or equal to the value.
max-device-width Numeric value The width of the screen size of the output device in pixels is smaller or equal to the value.
min-device-height Numeric value The height of the screen size of the output device in pixels is smaller or equal to the value.
min-device-width Numeric value The width of the screen size of the output device in pixels is smaller or equal to the value.
max-height Numeric value The height of the viewport in pixels is smaller than or equal to the value; (reevaluated when screen is resized).
min-height Numeric value The height of the viewport in pixels is greater than or equal to the value; (reevaluated when screen is resized).
max-width Numeric value The width of the viewport in pixels is smaller than or equal to the value; (reevaluated when screen is resized).
min-wdith Numeric value The width of the viewport in pixels is greater than or equal to the value; (reevaluated when screen is resized).
orientation portrait or landscape The orientation of the device.