CSS Media Queries

With the introduction of the @media rule in CSS2, it became feasible to specify distinct style guidelines for various media kinds.

The idea of CSS2 media types was expanded upon by media queries in CSS3, which look at a device’s capabilities rather than just its type.

width and height of the viewport
orientation of the viewport (landscape or portrait)
resolution

One common method for distributing a customized style sheet to PCs, laptops, tablets, and mobile phones (such iPhones and Android phones) is to use media queries.

CSS Media Types

Value	Description
all	Used for all media type devices
print	Used for print preview mode
screen	Used for computer screens, tablets, smart-phones etc.

CSS Common Media Features

Here are some commonly used media features:

Value	Description
orientation	Orientation of the viewport. Landscape or portrait
max-height	Maximum height of the viewport
min-height	Minimum height of the viewport
height	Height of the viewport (including scrollbar)
max-width	Maximum width of the viewport
min-width	Minimum width of the viewport
width	Width of the viewport (including scrollbar)

Media Query Syntax

A media query is made up of a media type and one or more media characteristics that have a true or false resolution.

				
					@media not|only mediatype and (media feature) and (media feature) {
  CSS-Code;
}

The mediatype is not required if you use not or only, but it is required if you use not or only. The result of the query is true if the media type you specify matches the type of device the document is being displayed on and if all of the media features in the media query are true. When a media query is true, the associated style sheet or style rules are applied, in accordance with standard cascading rules.

Interpretation of the keywords not, alone, and:

not: The entire meaning of a media query is reversed by this term.

only: This keyword stops the supplied styles from being applied by earlier browsers that do not support media queries. It is inapplicable to contemporary browsers.

and: This keyword combines one or more media attributes with a media type.

Additionally, you can connect to various stylesheets for various media and viewport dimensions of the browser window:

				
					<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="screen and (min-width: 480px)" href="example1.css">
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="example2.css">
etc....

Media Queries Simple Examples

Including an alternative CSS section directly within your style sheet is one method to leverage media queries.

If the viewport is 480 pixels wide or greater, the background-color changes to lightgreen; if the viewport is smaller than 480 pixels, the background-color remains pink.

Example

				
					@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

When the viewport is 480 pixels wide or wider, the menu in the example below will float to the left of the page; if the viewport is less, the menu will appear on top of the content.

Example

				
					@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

Tagged:
CSS

CSS Media Queries