The @media of responsive web design

Two ways, one is to determine the size of the device directly in link, and then reference a different CSS file:

1	<linkrel="stylesheet" type="text/css" href="styleA.css"media="screen and (min-width: 400px)">

This means that when the width of the screen is greater than or equal to 400px, the application stylea.css

In the media properties:

Screen
is one of the media types, CSS2.1 defines 10 media types

And
is called a keyword, other keywords also include not (excluding a device), only (qualifying a device)

(min-width:400px) is the media feature, which is placed in a pair of parentheses.

1	<linkrel="stylesheet" type="text/css" href="styleB.css"media="screen and (min-width: 600px) and (max-width: 800px)">

This means that when the width of the screen is greater than 600 and less than 800, the application styleb.css

Another way, which is written directly in the

12345

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/  .class {    background: #ccc;  }}

The notation is preceded by a @media, and the other is the same as the media attribute in link.
Max Width
The following styles are applied when the width of the viewable area is less than 600px.

123456

@media screen and (max-width: 600px) {  .class {    background: #fff;   你的样式  }}

Min Width
The following styles are applied when the width of the viewable area is greater than 900px.

12345

@media screen and (min-width: 900px) {  .class {    background: #fff;  }}

Multiple Media Queries
You can also use a match condition where the following style is applied when the width of the viewable area is between 600px and 900px.

12345

@media screen and (min-width: 600px) and (max-width: 900px) {  .class {    background: #fff;  }}

The @media of responsive web design