CSS Media Queries
consists of an optional media type and zero or more expressions that limit the style sheets' scope by using media features, such as width, height, color.
added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself
the result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>CSS Media Queries
when a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
style sheets with media queries attached to their <link> tags will still download even id their media queries would return false (they will not apply, however)
unless you use the not or only operators, the media type is optional and the all type will be implied.
CSS Media Queries - Logical Operators
compose complex media queries using logical operators, including not, and, and only.
and : combining multiple media features together into a single media query, requiring each chained feature to return true in order to the query to be true.
not : used to negate an entire media query
only : used to apply a style only if the entire query matches, useful for preventing older browsers from applying selected styles.
if you use the not or only operators, you must specify an explicit media type
you can also combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the entire media statement returns true. this is equivalent to an or operator
CSS Media Queries - Logical Operators
and :
used for combining multiple media features together, as well as combining media features with media types
@media (min-width: 700px) { ... }
/*
If, however, you wanted this to apply only if the display is in landscape,
you could use an and operator to chain the media features together :
*/
@media (min-width: 700px) and (orientation: landscape) { ... }it will only return true if the viewport is 700px wide or wider and the display is in landscape.
If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an and operator.
/*
Now, the above media query will only apply if the media type is TV, the viewport is 700px wide or wider,
and the display is in landscape.
*/
@media tv and (min-width: 700px) and (orientation: landscape) { ... }CSS Media Queries - Logical Operators
not :
applies to the whole media query and returns true if the media query would otherwise return false
only negates the media query it is applied to and not to every media query if present in a comma-separated list of media queries!
cannot be used to negate an individual feature query, only an entire media query. For example, the not is evaluated last in the following query :
@media not all and (monochrome) { ... }
/* This means that the query is evaluated like this: */
@media not (all and (monochrome)) { ... }
/* ... rather than like this: */
@media (not all) and (monochrome) { ... }
@media not screen and (color), print and (color) { ... }
/* it is evaluated like this: */
@media (not (screen and (color))), print and (color) { ... }CSS Media Queries - Logical Operators
only :
prevents older browsers that do not support media queries with media features from applying the given styles
<link rel="stylesheet" media="only screen and (color)" href="example.css" />NOTE : Media queries are case insensitive. Media queries involving unknown media types are always false.
CSS Media Queries - Media Features
aspect-ratio :
aspect ratio of the targeted display area of the output device. This value consists of two positive integers separated by a slash character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).
/* The following selects a special style sheet to use for when the display area is at least as wide as it is high. */
@media screen and (min-aspect-ratio: 1/1) { ... }
/*
This selects the style when the aspect ratio is either 1:1 or greater. In other words,
these styles will only be applied when the viewing area is square or landscape.
*/
orientation :
Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is square or taller than it is wide) mode.
@media all and (orientation: portrait) { ... }
/*
Note: This value does not correspond to actual device orientation. Opening the soft keyboard
on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the
browser to use landscape styles instead of portrait.
*/CSS Media Queries - Media Features
resolution :
(pixel density) of the output device. The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm)
@media print and (min-resolution: 300dpi) { ... }width :
the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer)
/*
If you want to specify a style sheet for handheld devices, or screen devices with a width greater than 20em, you can use this query:
*/
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
/*
This media query specifies a style sheet that applies to printed media wider than 8.5 inches:
*/
<link rel="stylesheet" media="print and (min-width: 8.5in)" href="http://foo.com/mystyle.css" />
/*
This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:
*/
@media screen and (min-width: 500px) and (max-width: 800px) { ... }CSS Media Queries - Useful Readings
CSS - Session 3.1 : Media Queries
By erdi taner gökalp
CSS - Session 3.1 : Media Queries
- 333
