Responsive web design @ media, responsive web @ media

Responsive web design @ media, responsive web @ media

Either way, you can determine the device size directly in the link and then reference different css files:

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

When the screen width is greater than or equal to px, stylea.css is used.

In media attributes:

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

When the screen width is greater than or less, styleb.css is applied.

Another method is to directly write it in the <style> label:

12345

@ Media screen and (max-width: 600px) {/* apply the following CSS style when the screen size is smaller than 600px */  .class {    background: #ccc;  }}

The method is to add @ media, and the other attributes are the same as those in the link.
Max Width
The following style will be applied when the width of the visible area is smaller than PX.

123456

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

Min Width
The following style will be applied when the width of the visible area is greater than 900px.

12345

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

Multiple Media Queries
You can also use a matching condition. The following style will be applied when the width of the visible area is between 600px and 900px.

 

12345

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