Detailed introduction to media types of css attributes

Foreword:

One of the most important features of a style sheet is that it can act on a variety of media, such as pages, screens, electronic synthesizers, etc. Certain properties can only work on specific media. For example, the "font-size" property only works on scrollable media types (screen).

Declaring a media attribute can be introduced using @import or @media:

@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}

You can also introduce media in the document tag:

<link rel="stylesheet" type="text/css" media="print" href="foo.css">

(Recommended tutorial: CSS Tutorial)

It can be seen that the difference between @import and @media is that the former introduces external style sheets for media types, while the latter directly introduces media attributes.

The method of using @import is to add the URL address of the style sheet file to @import and then add the media type. Multiple media can share a style sheet, and the media types are separated by "," separators. The usage of @media is to put the media type first, and other rules are basically the same as rule-set.

The various media types are listed below:

SCREEN: Refers to the computer screen.

PRINT: Refers to the opaque media used for printers.

PROJECTION: refers to the project used for display.

BRAILLE: Braille system, refers to printed matter with tactile effects.

AURAL: refers to a speech electronic synthesizer.

TV: Refers to television type media.

HANDHELD: refers to a handheld display device (small screen, monochrome).

ALL: Suitable for all media.

Use of mobile terminal (mobile terminal) adaptive style @media

Universal mobile terminal style:

@media all and (orientation : portrait) {
/*竖屏*/
}
@media all and (orientation : landscape) {
/*横屏*/
}

Specify mobile terminal height style:

@media screen and (max-width: 750px)
@media screen and (min-width: 720px) and (max-width: 960px) {//720 <= xxx < 960的设备}

Styles set according to different devices:

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }

Pay attention to the order. If you write @media (min-width: 768px) below, it will be very tragic, because the css file is read from top to bottom. Yes, the priority of the subsequent css will be higher

@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }

Because if it is 1440, since 1440>768, your 1200 will be invalid.

So when we use min-width, the small ones are placed on top and the big ones are on the bottom. Similarly, if we use max-width, the big ones are on top and the small ones are on the bottom.

@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

Related Video tutorial recommendation: css video tutorial

The above is the detailed content of Detailed introduction to media types of css attributes. For more information, please follow other related articles on the PHP Chinese website!