Summary of basic usage of CSS3 @media

//grammar:
@media mediatype and | not | only (media feature) { css-code; }
//You can also use different stylesheets for different media: 
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

1. First is the <meta> tag

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Several parameters of this code are explained:

width = device-width: The width is equal to the width of the current device
initial-scale: The initial scale (the default setting is 1.0)
minimum-scale: The minimum scale to which the user is allowed to zoom (default setting is 1.0)
maximum-scale: The maximum scale to which the user is allowed to zoom (default setting is 1.0)
user-scalable: Whether the user can manually zoom in and out (the default setting is no, because we don't want users to zoom in and out of the page)

2. Introduced in the <head> tag (CSS2 media)

In fact, CSS3 is not the only one that supports the use of Media. CSS2 has already supported Media. The specific usage is to insert the following code in the head tag of the HTML page:

For example, if we want to know whether the current mobile device has a vertical display, we can write:

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" ;href="style.css">

When the page width is less than 960, the specified style file is executed:

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

Since CSS2 can achieve this effect of CSS, why not use this method? Many people may ask, but the biggest disadvantage of the above method is that it will increase the number of http requests for the page and increase the burden of the page. It is the best way for us to use CSS3 to write all the styles in one file.

Here's how conflicts occur:

<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 800px)">  
<link rel="stylesheet" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">  
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">

The above divides the device into 3 types: when the width is greater than 800px, styleA is applied, when the width is between 600px and 800px, styleB is applied, and when the width is less than 600px, styleC is applied. So what style should be applied if the width is exactly 800px? It is styleB, because the first two expressions are both true, and according to the CSS default priority rule, the latter overrides the former.

Therefore, to avoid conflicts, this example should normally be written like this:

<link rel="stylesheet" href="styleA.css" media="screen">  
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">  
<link rel="stylesheet" href="styleC.css" media="screen and (max-width: 600px)">

3. Return to CSS3 @media

We have briefly talked about the usage of CSS2 media queries above. Now let's go back to CSS3 media queries. In the first code, I used the writing method for sizes less than 960px. Now let's implement the code equal to 960px. The following code needs to be written in the style tag or css file:

@media screen and (max-device-width:960px) {
    body{background:red;}
}

Then there is the code when the browser size is greater than 960px:

@media screen and (min-width:960px) { 
    body{background:orange;}
}

We can also mix the above usage:

@media screen and (min-width:960px) and (max-width:1200px) {
    body{background:yellow;}
}

The above code means that the following CSS will be executed when the page width is greater than 960px and less than 1200px.

4. Summary of all Media parameters

The above are the three features of the media query that we need to use most often, which are greater than, equal to, and less than. The full functionality of the media query tool is definitely more than just these three functions. Here is a summary of some of its parameter usage:

width: browser visible width.
height: Browser visible height.
device-width: The width of the device screen.
device-height: The height of the device screen.
orientation: Detects whether the device is currently in landscape or portrait orientation.
aspect-ratio: Detects the ratio of the browser's visible width and height. (For example: aspect-ratio:16/9)
device-aspect-ratio: Detects the ratio of the width and height of the device.
color: The number of bits to detect the color. (For example, min-color:32 will detect if the device has 32-bit color)
color-index: Checks the color in the device's color index table. Its value cannot be negative.
monochrome: Checks the number of bits per pixel in the monochrome frame buffer. (This is too advanced, I guess we will rarely use it)
resolution: Detect the resolution of the screen or printer. (For example: min-resolution:300dpi or min-resolution:118dpcm).
grid: Detect whether the output device is a grid or a bitmap device.

(max-width:599px) 
(min-width:600px) 
(orientation:portrait) vertical screen (orientation:landscape) horizontal screen (-webkit-min-device-pixel-ratio: 2) pixel ratio

5. Media Type

1.all all media

2. Braille tactile device

3. Embossed Braille Printer

4.Print handheld device

5.projection print preview

6.screen color screen equipment

7.speech 'auditory' similar media types

8.tty is not suitable for pixel devices

9. TV

6. Keywords

1.and

2.not The not keyword is used to exclude a certain type of media.

3. Only only is used to define a specific media type

- Often used for devices that do not support media features but support media types

7. Browser Support

IE8-

IE9+

Chrome 5+

Opera 10+

Firefox 3.6+<

Safari 4+

8. Several commonly used screen width settings:

@media screen and (min-width: 1200px) {
        css-code;
}
@media screen and (min-width: 960px) and (max-width: 1199px) {
        css-code;
}
@media screen and (min-width: 768px) and (max-width: 959px) {
        css-code;
}
@media screen and (min-width: 480px) and (max-width: 767px) {
        css-code;
}
@media screen and (max-width: 479px) {
        css-code;
}

Summarize

The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. Thank you for your support of 123WORDPRESS.COM.

<<: How to package the project into docker through idea

>>: Detailed explanation of the use of MySQL sql_mode