CSS Tutorial: CSS Attribute Media Type

One of the most important features of a style sheet is that it can be applied to multiple media, such as pages, screens, electronic synthesizers, and so on. Certain properties only apply to certain media, for example the "font-size" property only applies to scrollable media types (screens).

To declare a media attribute, you can use @import or @media:

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

Media can also be included in the document markup:
<link rel="stylesheet" type="text/css" media="print" href="foo.css">
As you can see, the difference between @import and @media is that the former imports external style sheets for media types, while the latter directly imports media attributes. The usage of @import is @import plus the URL address of the style sheet file and then the media type. Multiple media can share one style sheet, and the media types are separated by the "," separator. The usage of @media is to put the media type first, and the 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 opaque media used in printers.
PROJECTION: refers to the project to be displayed.
BRAILLE: Braille system, referring to printed matter with tactile effects.
AURAL: refers to an electronic speech synthesizer.
TV: refers to television-type media.
HANDHELD: refers to a handheld display device (small screen, monochrome)
ALL: Applicable to all media.

Use of mobile-friendly @media style

General mobile phone style:

@media all and (orientation : portrait) {
/*Vertical screen*/
}
@media all and (orientation : landscape) {
/*Horizontal screen*/
}

Specify the height style for mobile phones:

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

Styles set according to different devices:

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

Pay attention to the order. If you write @media (min-width: 768px) below, it will be a tragedy, because the CSS file is read from top to bottom, and the latter CSS will have a higher priority.

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

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

So when we use min-width, the smaller one is on top and the larger one is on the bottom. Similarly, if we use max-width, the larger one is on top and the smaller one is on the bottom.

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

This article ends here