A detailed explanation of the actual use of @media in CSS3

This tutorial explains the practical use of @media in CSS3

Grammar:

CSS code copy content to clipboard

@media:<smedia> {Srules}

Value:

<smedia>:    specifies the device name. {srules}:    style sheet definition.

Description

Determine the type of medium (object) to achieve different presentation. This feature allows CSS to work more precisely on different media types, different conditions in the same medium (resolution, Number of colors, and so on).

Copy the code code as follows:

Media_query: [only | not]? <media_type> [and <expression>]*expression: (<media_feature> [: <value>]?) Media_type:all | Aural | Braille | Handheld | Print | Projection | Screen | TTY | TV | Embossedmedia_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| 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

Common wording:

CSS code copy content to clipboard

@media screen and (max-width:600px) {/* Apply the following CSS style */    . class {       background: #ccc;     }   } When the display size is less than 600px.

@media screen and this is one of the most common notation, followed by a limited size

The notation of all and only

The general all and only are the corresponding together

CSS code copy content to clipboard

@media all and (min-width:xxx) and (max-width:xxx) {/   * This query is all for all devices (some devices are not necessarily screens, maybe typewriters, blind readers) */  }

@media only screens and (min-width:xxx) and (max-width:xxx) {/   * are for all devices, this is only for color screen devices */  }   Device-aspect-ratio

Device-aspect-ratio can be used to fit a device with a specific screen aspect ratio, which is also a useful property, for example, our page wants to define a style for a normal screen with a aspect ratio of 4:3, and then for a widescreen of 16:9 and 16:10, define another style, such as adaptive width and fixed width:

Usage:

CSS code copy content to clipboard

@media only screen and (DEVICE-ASPECT-RATIO:4/3)

The above is CSS3 in the actual use of @media detailed content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

