Media Query - Targeting a styling rule to a screen device

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),

Syntax

A media query consists of a:

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

A string matches the environment of the user if it is:

  • the empty string,
  • a string consisting of only space characters,
  • a media query that matches the user's environment

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

Example

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

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

Specification

Support

It's not working

If your media query are not working be sure to have defined the viewport in html

Example:

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>





Discover More
Bootstrap - Navbar

in Bootstrap In Bootstrap 4, the Navbar is responsive by default and utilizes flexbox to make alignment of Navbar content much easier. The navbar-header class has been removed from Bootstrap 4, and the...
Grid Form With Horizontal Vertical Alignment
CSS - Grid

grid is a CSS layout system that provides a mechanism: to divide the available space into columns and rows (two-dimensional grid) to position into one or more intersections an html element (known...
CSS - Media Features

media feature is the feature of a media that can be used in a media query in order to target the styling rule to a specific device. width (the total width of the page in CSS pixels (logical pixel))...
CSS - Media Type (Screen, Paper, ) - Medium

HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use: on a screen, sans-serif fonts when displayed when printed, and...
Cssom Tree
CSS - Object Model (CSSOM) - Parsing

CSSOM defines APIs (including generic parsing and serialization rules) for Media Queries, Selectors, and of course CSS itself. The CSS bytes are converted into characters, then tokens, then nodes, and...
CSS - Resolution

resolution is a media feature that is used in media query to target styling rule to a specific device. The resolution with javascript can be calculated by multiplying the device pixel ratio by 96....
CSS - Responsive (Breakpoint)

responsiveness in CSS An element that defined the width: as percentage or fix with a max-width property in percentage generally equal or below 100% Example: Bootstrap use media queries to create...
CSS - Responsive typography

Responsive typography refers to scaling text and components by simply adjusting the root element’s font-size within a series of media queries See also: ...
HTML - The link element (inter-document relationships)

The link represents metadata that expresses inter-document relationships. hyperlink The link element can be used only within the head element. where: media is a list of media query separated...
How to create responsive images in HTML ? (from A to Z)

This article regroups all information about responsive image



Share this page:
Follow us:
Task Runner