媒体查询关键代码

Posted 2020-07-19 WEB前端--haley

head里面的代码

<meta name="viewport" content="width=device-width, initial-scale=1">

 

媒体查询适应不同屏幕代码

 1 /*只有在PC下才执行的样式*/
 2 @media screen and (min-width: 992px) {
 3     h1 {
 4         font-size: 36px;
 5         margin: 30px 0 10px 0;
 6     }
 7     .box {
 8         border: 1px solid #a33;
 9         color: #a33;
10         background-color: #fee;
11         margin: 10px;
12         padding: 10px;
13     }
14 }
15 /*只有在PAD下才执行的样式*/
16 @media screen and (min-width: 768px) and (max-width: 992px) {
17     h1 {
18         font-size: 28px;
19         margin: 20px 0 10px 0;
20     }
21     .box {
22         border: 1px solid #3a3;
23         color: #3a3;
24         background-color: #efe;
25         margin: 10px;
26         padding: 10px;
27     }
28 }
29 /*只有在PHONE下才执行的样式*/
30 @media screen and (max-width: 767px) {
31     h1 {
32         /*font-size: 28px;
33         margin: 20px 0 10px 0;*/
34         display: none;
35     }
36     .box {
37         border: 1px solid #33a;
38         color: #33a;
39         background-color: #eef;
40         margin: 10px;
41         padding: 10px;
42     }
43 }