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.
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.
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
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.
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” />
<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”>
This is the meta tag you would use to make your site responsive. It will not work properly without the meta tag.
<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.