Media queries extend the functionality of media types (print, screen) by allowing more conditional expressions in the application of style sheets.
Example:
A media query consists of a:
A string matches the environment of the user if it is:
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
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"/>