CSS - Media Query
Table of Contents
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),
- …
2 - Articles Related
3 - 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.
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;
}
}
4.2 - Link
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);
5 - Specification
- Media Queriesspecification, H. Lie, T. Çelik, D. Glazman, A. van Kesteren. W3C.