Media queries allow you to determine which styles are applied to pages based on the presence or absence of specific media properties such as screen width, color, or resolution. It's essentially a way of extending the current media declaration.
The basic syntax is this:
link rel="stylesheet" href="desktop.css" media="[not | only ] screen [and] (expression)"
Not and only are keywords that can be used to check for a negative return on the expression (not), or hide the media query from older user agents (only).
The and keyword allows us to constrain the application of styles to the conditions of the expression that follows it. The expression allows you to test specific media feature values and determine if the styles should be applied. For example, the following media query would limit the styles to apply to only screen devices that had a screen width of greater than 720px.
media="only screen and (min-width:720px)"
We have a wide range of media features to test for including width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, and grid. Length values, like width, can be expanded by adding the min- or max- prefix.