CSS-Responsive design

<link rel= "stylesheet" type= "text/css" media= "screen and (max-width:480px), screen and (max-device-width:480px)" href= "Link.css"/>

Where max-width refers to the maximum width of the rendering interface, max-device-width refers to the maximum width of the device screen
This code means that the Link.css file is referenced when the device screen width is less than or equal to 480 pixels and the maximum width of the rendering interface is less than or equal to 480 pixels.

<link rel= "stylesheet" type= "text/css" media= "screen and (min-device-width:480px), screen and (max-device-width: 980px) "href=" Link.css "/>

Reference the Link.css file when the device screen width is greater than or equal to 480 pixels and less than 980 pixels.

<link rel= "stylesheet" type= "text/css" media= "screen and (min-device-width:980px)" href= "Link.css"/>

When the device screen width is greater than or equal to 980, reference the Link.css file.

The second type of CSS file is written in:

@media screen and (max-width:600px) {/* applies the following CSS style */.class {background: #ccc;}} When the display size is less than or equal to 600px.

@media screen and (min-width:600px) {/* applies the following CSS style */.class {background: #ccc;}} When the display size is greater than or equal to 600px

@media screen and (min-width:600px) and (max-width:900px) {/*) apply the following CSS style */.class {background, when the display size is greater than or equal to 600px and less than 900px: #fff;}}

CSS-Responsive design