CSS 3 @ media queries

@media can set different styles for different screen sizes

Scope of use: Responsive pages

1, Grammar:

• instyleInside label use

// The document width is less than1367pxChange the background color when@media screen and (max-width: 1367px) {
    body {
        background-color:lightblue; } // The width of the document is between1368pxwith1441pxTo change the background color@media screen and (min-width: 1368px) and (max-width: 1441px) {
    body {
        background-color:lightgreen; } // The width of the document is between1442pxwith1600pxTo change the background color@media screen and (min-width: 1442px) and (max-width: 1600px) {
    body {
        background-color:lightred; }}Copy the code

• inhtmlUse the head

If the screen width is between 400 and 600 pixels, the smallscreen.css file is loaded.

<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
Copy the code

2. Explanation:

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
Copy the code

Mediatype :(mediatype)

Screen: for computer screens, tablets, smartphones, etc.

Print: For printers and print previews

Media feature