Shulou(Shulou.com)06/03 Report--

This article shows you how to use CSS3 media query MediaQueries, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Grammar

A media query contains a media type and media attributes that contain one or more expressions, as described in the CSS3 specification, which are parsed to true or false. If the media type in the media query matches the device to be displayed in the document, the query result is true, and all expressions in the media query are true.

CSS Code copies content to the clipboard

@ media (max-width: 600px) {.facet _ sidebar {display: none;}}

When the media query is true, the relevant stylesheets or style rules are applied according to the normal cascading rules. Even if the media query returns false, the stylesheet with the media query on the label will still be downloaded (though it will not be applied).

Without using the not or only operators, the media type is optional and defaults to all.

Logical operator

The operators not,and and only can be used to build complex media queries.

The and operator is used to combine multiple media attributes into the same media query. The result of this query is true only if each property is true.

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

The only operator indicates that the specified style is applied only if the media query matches successfully. You can use it to keep selected styles from being applied in older browsers.

If you use the not or only operator, you must explicitly specify a media type.

You can also put multiple media queries together separated by commas; as long as any one of them is true, the entire media statement returns true. Equivalent to the or operator.

And

The and keyword is used to merge multiple media attributes or to merge media attributes with media types. A basic media query, that is, a media attribute with the default specified all media type, might look like this:

CSS Code copies content to the clipboard

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

If you only want to apply this on a landscape screen, you can use the and operation to match and media properties:

CSS Code copies content to the clipboard

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

Now the above media query is only valid when the width of the visual area is not less than 700 pixels and is valid on the landscape screen. If you only want to apply to TV media, you can use and operation to match and media properties:

CSS Code copies content to the clipboard

Media tv and (min-width: 700px) and (orientation: landscape) {.}

Now, the above media query is only on TV media, and the visual area is not less than 700 pixels wide and is valid when the screen is horizontal.

Comma separated list

The effect of using comma separation in media queries is equivalent to the or logical operator. When comma-separated media queries are used, the style is valid if any media query returns true. Each query in a comma-separated list is independent, and the operators in one query do not affect other media queries. This means that the comma media query list can act on different media attributes, types, and states.

For example, if you want to apply a set of styles to a handheld device with a minimum width of 700 pixels or a horizontal screen, you can write:

CSS Code copies content to the clipboard

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

As above, if it is an 800-pixel wide screen device, the media statement will return true, because the first part equivalent to @ media all and (min-width: 700px) will be applied to the device and return true, although my screen media type does not match the handheld media type in the second part. Similarly, if I am a 500-pixel wide horizontal screen handheld device, although the first part does not match because of the width problem, the second part will still succeed, so the entire media query returns true.

Not

The not keyword is applied to the entire media query, returning true if the media query is false (for example, monochrome applied to a color display device or a 600-pixel screen applied to a min-width: 700px attribute query). In the comma media query list, not only negates the media queries it applies to and does not affect other media queries. The not keyword can only be applied to the entire query, not to a separate query. For example, not is finally evaluated in the following query:

CSS Code copies content to the clipboard

@ media not all and (monochrome) {.}

Equivalent to:

CSS Code copies content to the clipboard

Media not (all and (monochrome)) {...}

Instead of:

CSS Code copies content to the clipboard

Media (not all) and (monochrome) {...}

For another example, take a look at the following media query:

CSS Code copies content to the clipboard

@ media not screen and (color), print and (color)

Equivalent to:

CSS Code copies content to the clipboard

@ media (not (screen and (color), print and (color)

Only

The only keyword prevents older browsers from not supporting queries with media attributes and applying them to a given style:

CSS Code copies content to the clipboard

Pseudo paradigm

CSS Code copies content to the clipboard

Media_query_list: [,] *

Media_query: [[only | not]? [and] *]

| | [and] * |

Expression: ([:])

Media_type: all | aural | braille | handheld | print |

Projection | screen | tty | tv | embossed

Media_feature: 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 |

Media queries are case-insensitive. Queries that contain unknown media types usually return false.

Note: parentheses are required for expressions. What is not in use will cause errors.

Detectable features of media query

Width: viewport width

Height: viewport height

Device-width: the width of the rendered surface (for us, the width of the device screen)

Device-height: the height of the rendered surface (for us, the height of the device screen)

Orientation: check whether the device is horizontal or vertical

Aspect-ratio: the aspect ratio based on the width and height of the viewport. A display screen with a ratio of 16 ∶ 9 can be defined as aspect-ratio: 16 Universe 9.

Device-aspect-ratio: similar to aspect-ratio, the aspect ratio based on the width and height of the device rendering plane

Color: the number of digits per color. For example, min-color: 16 detects whether the device has a 16-bit color.

Color-index: the number of colors in the device's color index table. Value must be a non-negative integer.

Monochrome: detects the number of bits used per pixel in the monochrome framebuffer. The value must be a non-negative integer, such as

Monochrome: 2

Resolution: used to detect the resolution of a screen or printer, such as min-resolution: 300dpi. You can also accept measures of dots per centimeter, such as min-resolution: 118dpcm.

Scan: the scanning mode of the TV. The value can be set to progressive (progressive scanning) or interlace (interlaced scanning). For example, 720p HD TV (p of 720p indicates progressive scanning) matches scan: progressive, while 1080i HD TV (I in 1080i indicates interlaced scanning) matches scan: interlace.

Grid: used to detect whether the output device is a grid device or a bitmap device.

With the exception of scan and grid, you can use the min and max prefixes to create a query scope, such as min-width:200px, max-width:360px.

Using viewport to prevent users from zooming

CSS Code copies content to the clipboard

Meta tag said: force the width of the document and the width of the device to maintain at 1:1, and the maximum width of the document is 1.0, and does not allow users to click on the screen to browse; it is particularly important to note that the setting of multiple properties in content must be separated by semicolons + spaces, if not standardized will not work.

Width viewport width (Numeric / device-width)

Height viewport height (Numeric / device-height)

Initial-scale initial scale

Maximum-scale Max Zoom

Minimum-scale minimum Scalin

Does user-scalable allow users to zoom (yes/no)

A new attribute has been added in minimal-ui iOS 7.1 beta 2 (Note: it has been removed in iOS8) to minimize the upper and lower status bars when the page loads.

Note: another important concept about viewport is that iphone's safari browser doesn't have a scroll bar at all, and it's not just a "hidden scroll bar", it doesn't have this feature at all. Iphone's safari browser actually displays the page in its entirety from the start, and then uses viewport to view parts of it. When you drag with your fingers, it's not a page, it's viewport. The change in browser behavior is not just a scroll bar, but interactive events are also different from normal desktops.

The above content is CSS3 Media query MediaQueries how to use, have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.