CSS - Media Query

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin

1 - About

Media queries extend the functionality of media types (print, screen) by allowing more conditional expressions in the application of style sheets.

Example:

  • landscape or not,
  • from a certain width (viewport width),
Advertising

3 - Syntax

A media query consists of a:

  • media type
  • and zero or more expressions that check for the conditions of particular media features (width, height, color, see below).

Media Features:

  • width (the total width of the page in CSS pixels)
  • height
  • device-width (takes a device pixel)
  • device-height (takes a device pixel)
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

A string is a valid media query if it matches the media_query_list production of the Media Queries specification.

A string matches the environment of the user if it is the empty string, a string consisting of only space characters, or is a media query that matches the user's environment according to the definitions given in the Media Queries specification.

Advertising

4 - Example

4.1 - Inline

Below a viewport of 768 px, the element

@media only screen and (min-width: 768px) and (orientation: landscape) {
    .navbar-toggle {
           display: none;
    }
}

In Less:

.navbar-toggle {
  @media (min-width: @grid-float-breakpoint) {
    display: none;
  }
}

With a Link element in the header.

<link rel="stylesheet" media="screen and (min-width: 300px)" href="myStyleSheet.css">

4.3 - Import

With the import rule

@import url("mySteelSheet.css") only screen and (min-width: 500px);

The import rule will fire an new HTTP request after the reception of the parent stylesheet and therefore has a lower performance than the two others methods

5 - Specification

Advertising
web/css/media_query.txt · Last modified: 2019/02/09 11:40 by gerardnico