CSS - Media Query


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


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


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.



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


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



It's not working

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


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

Powered by ComboStrap