Subject: Advanced Internet Technology

Topic: Responsive web design with HTML5 and CSS3

Difficulty: Low

Media Query

• The @media rule is used in media queries to apply different styles for different media types/devices. For example, you can specify that certain styles are only for printed documents, or for screens, or for screen readers (mediatype: print, screen, or speech). In addition to media types, there are also media features.
• 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

How a media query is used?

- 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.