The practical use of @media in CSS3

Grammar:

CSS code copy content to clipboard

@media: {srules}

Take value:

　　 ：

Specifies the device name.

{Srules}:

Style sheet definition.

Description

Determine the type of media (object) to achieve different presentation. This feature allows CSS to be more precise in different media types, different conditions (resolution, chromatic number, etc.) of the same medium.

The code is as follows:

Media_query: [only | not]? [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

| 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 when the on-screen size is less than 600px * *

. class {

Background: #ccc;

}

}

@media screen And this is the most common form of writing, followed by a limited size

With all and only to the wording

The general all and only is corresponding to appear together

CSS code copy content to clipboard

@media all and (min-width:xxx) and (max-width:xxx) {

/* All of this query is for all devices (some devices may not be screens, perhaps typewriters, blind readers) * *

}

@media only screen and (min-width:xxx) and (max-width:xxx) {

* * For all devices, this paragraph is only (only) for color screen equipment * *

}

Device-aspect-ratio

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

Usage:

CSS code copy content to clipboard

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