Deep understanding of CSS Media queries and deep understanding of css

Deep understanding of CSS Media queries and deep understanding of css
* Contents [1] media type [2] media attributes [3] syntax

When it comes to responsive design, media queries are indispensable. It is generally considered that media queries are newly added to CSS3. In fact, CSS2 already exists, and CSS3 adds media attributes and use cases (not supported by IE8-browser ). This topic describes the content of a media query.

 

Media type

In CSS2, a media query is only used in the <style> and <link> labels, and the media attribute exists.

The media attribute specifies different styles for different media types.

Screen computer screen (default) tty telex typewriter and similar media TV devices using an equal-width character grid (low-resolution, limited screen tumble capabilities) projection projector handheld device (small screen, limited bandwidth) print preview mode/print page braille blind feedback device aural speech synthesizer all suitable for all devices

Media types that are truly widely used and compatible with all browsers are 'screen' and 'all'

<style media="screen">.box{height: 100px;width: 100px; background-color: lightblue;}    </style><div class="box"></div>    

Media attributes

Media attributes are newly added to CSS3. Most media attributes are prefixed with "min-" and "max-" to express "less than or equal to" and "greater than or equal ". This avoids the use of "<" and ">" characters that conflict with HTML and XML.

[Note] media attributes must be enclosed in brackets (); otherwise, the attributes are invalid.

All media attributes are listed in the following table.

     width | min-width | max-width     height | min-height | max-height     device-width | min-device-width | max-device-width     device-height | min-device-height | max-device-height     aspect-ratio | min-aspect-ratio | max-aspect-ratio     device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio     color | min-color | max-color     color-index | min-color-index | max-color-index     monochrome | min-monochrome | max-monochrome     resolution | min-resolution | max-resolution     scan | grid

[1] color)

Specify the bit value of each pixel unit of the output device. If the device does not support the output color, the value is 0.

Apply a style sheet to all devices with colors displayed

<style>@media (color){    .box{height: 100px;width: 100px;background-color: lightblue;}    }    </style><div class="box"></div>

[2] color index)

The color index specifies the number of entries in the color query table of the output device. If the color query table is not used, the value is equal to 0.

Apply a style sheet to all devices that use at least 256 indexed colors (the following code is not displayed, indicating that the return value is 0)

<style>@media (min-color-index: 256){    .box{height: 100px; width: 100px;background-color: lightgreen;}    }    </style>    <div class="box"></div>

[3] aspect-ratio)

The Aspect Ratio describes the aspect ratio of the target display area of the output device. This value contains two positive integers separated. Represents the ratio of the number of horizontal workers (the first value) to the number of vertical workers (the second value)

Apply a style sheet to a device that is either square or wide-screen in the visible area

<style>@media (min-aspect-ratio: 1/1) {    .box{height: 100px;width: 100px; background-color: lightgreen; }        }</style><div class="box"></div>

[4] device-aspect-ratio)

The device Aspect Ratio describes the aspect ratio of the output device. This value contains two positive integers separated. Represents the ratio of the number of horizontal workers (the first value) to the number of vertical workers (the second value)

Apply a style sheet to a special wide screen device with a Aspect Ratio

<style>@media (device-aspect-ratio:16/9) {    .box{ height: 100px;width: 100px; background-color: pink;}        }</style><div class="box"></div>

[5] device-height)

The device height describes the height of the output device.

Apply a style sheet to a document displayed on a screen with a minimum height of PX

<style>@media (min-device-height: 1000px) {    .box{ height: 100px;width: 100px; background-color: pink;}        }</style><div class="box"></div>

[6] device-width)

The device width describes the width of the output device.

Apply a style sheet to a document displayed on a screen with a minimum width of PX

<style>@media (min-device-width: 1000px) {    .box{ height: 100px; width: 100px;background-color: lightblue; }        }</style><div class="box"></div>

[7] grid)

Grid determines whether the output device is a grid device or a bitmap device. This value is 1 if the device is grid-based (for example, a telex terminal or a phone that can only display one font); otherwise, it is 0.

Apply a style sheet to a non-grid Device

<style>@media (grid:0) {    .box{height: 100px;width: 100px; background-color: lightgreen;}        }</style><div class="box"></div>

[8] height)

Height describes the height of the rendering area of the output device, such as the height of the visible area or the height of the printer tray.

Apply a style sheet to a device in a visible area with a height greater than 800px

<style>@media (min-height:800px) {    .box{ height: 100px; width: 100px;background-color: lightgreen; }        }</style><div class="box"></div>

[9] width (width)

Width describes the width of the rendering area of the output device.

Apply a style sheet to a device in a visible area with a width greater than PX

<style>@media (min-width:800px) {    .box{ height: 100px;width: 100px; background-color: lightgreen;}        }</style><div class="box"></div>

[10] Black and White (monochrome)

Black/white specifies the number of bits per pixel for a black/white (grayscale) device. If it is not a black/white device, the value is 0.

Apply a style sheet to a non-black/white Device

<style>@media (monochrome:0) {    .box{height: 100px; width: 100px; background-color: lightgreen;}        }</style><div class="box"></div>

[11] orientation)

Specifies whether the device is in landscape (width greater than width) or landscape (height greater than width) mode.

Value: landscape (landscape) | portrait (landscape)

Apply a style sheet to a portrait Device

<style>@media (orientation: portrait) {    .box{height: 100px;width: 100px;background-color: lightgreen; }        }</style><div class="box"></div>

[12] resolution (resolution)

Resolution specifies the resolution (pixel density) of the output device ). Resolution can be expressed by the number of points per inch (dpi) or centimeter (dpcm ).

[Note] the three elements of the screen (screen size, resolution, and pixel density) are now

Apply a style to a device at least 90 points per inch

<style>@media (min-resolution: 90dpi) {    .box{height: 100px;width: 100px; background-color: lightgreen; }        }</style><div class="box"></div>

[13] scan)

Scan describes the scanning process of the TV output device.

Value: progressive | interlace

 

Syntax

A media query contains an existing media type (or media type) in CSS2 and a media property added to CSS3 that contains one or more expressions. These media properties are parsed to be true or false.

When a media query is true, related style sheets or style rules are applied according to the normal cascading rules. Even if a media query returns a false result, the style sheet with a media query on the <link> tag will still be downloaded (but not applied)

<link rel="stylesheet" href="style.css" media="print"><div class="box"></div>    

Media is not 'print', so the media query is false. However, the style.css file is still downloaded.

Logical operators

Operators not, and, only, and comma (,) can be used to construct complex media queries.

And

The and operator is used to combine multiple media attributes into a single media query. The query result is true only when each attribute is true.

[Note] the media type is optional without the not or only operator. The default value is all.

Apply a style sheet that meets the conditions of horizontal screen and minimum width of 700px

@media all and (min-width: 700px) and (orientation: landscape) { ... }

The media type is optional when the not or only operator is not used. The default value is all.

@media (min-width: 700px) and (orientation: landscape) { ... }

Or

Multiple media queries are separated by commas. If either of them is true, the entire media statement returns true, which is equivalent to the or operator.

Apply a style sheet for a handheld device with a minimum width of 700 pixels or a horizontal screen

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

Not

The not operator is used to reverse the query results of a media set.

[Note] the not keyword can only be applied to the entire query, but not to an independent query.

@ Media not all and (monochrome) {...} // equivalent to @ media not (all and (monochrome )){...}

Only

The only operator indicates that the specified style is applied only when the media query is successful. It can be used to prevent selected styles from being applied in old-fashioned browsers.

[Note] No matter whether the only operator is used or not, the result is not affected.

<style media="only screen and (max-width:1000px)">.box{width: 100px;height: 100px;background-color: pink;}</style><div class="box"></div>

In fact, only and (expressed by commas) are commonly used in the only, not, and, or logic.