The Speed Coding

CSS Tutorial

CSS Introduction CSS Syntax CSS Selectors CSS How To CSS Comments CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Height/Width CSS Box Model CSS Outline CSS Text CSS Fonts CSS Icons CSS Links CSS Lists CSS Tables CSS Display CSS Max-width CSS Position CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS Opacity CSS Navigation Bar CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors CSS Forms CSS Counters CSS Website Layout CSS Units CSS Specificity

CSS Advanced

CSS Rounded Corners CSS Border Images CSS Backgrounds CSS Colors CSS Gradients CSS Shadows CSS Text Effects CSS Web Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS Style Images CSS object-fit CSS Buttons CSS Pagination CSS Multiple Columns CSS User Interface CSS Variables CSS Box Sizing CSS Flexbox CSS Media Queries CSS MQ Examples

CSS Responsive

RWD Intro RWD Viewport RWD Grid View RWD Media Queries RWD Images RWD Videos RWD Frameworks RWD Templates

CSS Grid

Grid Intro Grid Container Grid Item

CSS References

CSS Reference CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support

CSS Media Queries


CSS2 Introduced Media Types

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.

Unfortunately these media types never got a lot of support by devices, other than the print media type.


CSS3 Introduced Media Queries

Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution

Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).


Browser Support

The numbers in the table specifies the first browser version that fully supports the @media rule.

Property
@media 21.0 9.0 3.5 4.0 9.0

Media Query Syntax

A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.

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

The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.

Unless you use the not or only operators, the media type is optional and the all type will be implied.

You can also have different stylesheets for different media:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href ="print.css">

CSS3 Media Types

Value Description
all Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page out loud

Media Queries Simple Examples

One way to use media queries is to have an alternate CSS section right inside your style sheet.

The following example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the background-color will be pink):

Example

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

The following example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the menu will be on top of the content):

Example

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

More Media Query Examples

For much more examples on media queries, go to the next page: CSS MQ Examples.


CSS @media Reference

For a full overview of all the media types and features/expressions, please look at the @media rule in our CSS reference.