Lesson 109: Media Queries

Estimated Length: 20min | Difficulty: Advanced

In this lesson we will be learning about Media Queries. Media Queries is a CSS3 module that allows the content of your site to adapt to conditions like the screen size. (ex. smartphone screen size vs. desktop computer screen size) We use the @media rule to define different style rules for different media types or devices.

To help you understand more, we will go over Media Query Properties, Media Types, Media Keywords, Stylesheets, Meta tags, and Brower Support for CSS3 Media Queries.

Media Queries

Properties

Screen: This specifies that the media type is used for computer screens, tablets, smartphones, etc.

Print: This specifies that the media type is used for printers.

Media Types

min-width: greater or equal to width constraints

max-width: smaller or equal to width constraints

min-device-width: greater or equal to device width constraints

max-device-width: smaller or equal to device width constraints

min-height: greater or equal to height constraints

max-height: smaller or equal to height constraints

min-device-height: greater or equal to device height constraints

max-device-height: smaller or equal to device height constraints

Media Keywords

and: The and keyword is used for combining multiple media features together. It is also used for combining media features with media types.

not: The not keyword applies to the whole media query and returns true if the media query would otherwise return false. (Ex. a screen width of 600px with a min-width: 700px).

only: The only keyword prevents older browsers that do not support media queries with media features from applying styles.

Examples of Stylesheets

Here is an example of how you would link and name the different stylesheets for the various sizes of your responsive site. We believe it is best to keep everything in one stylesheet, but this is how you would break it up if you want to.

For iPhone 4:

<link rel”stylesheet” media=”only screen and (-webkit-min-device-pixel-ratio: 2)” type=”text/css” href=”iphone4.css” />

For iPad:

<link rel”stylesheet” media=”only screen and (max-device-width:1024px)” type=”text/css” href=”ipad.css” />

For Portrait Orientation:

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>

For Landscape Orientation:

<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>

Responsive Meta Tag

This is the meta tag you would use to make your site responsive. It will not work properly without the meta tag.

Example:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

initial-scale=1.0: This defines the scale of the website and sets the initial zoom level. This is helpful when changing the orientation or preventing a default zoom.

width=device-width: This tag is used to tell the browser that the website adapts to the devices width.