媒体查询关键代码

head里面的代码

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

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

 1 /*只有在PC下才执行的样式*/
 2 @media screen and (min- 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- 768px) and (max- 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- 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 }

haley欢迎您来访本博客。此博客是作者在工作中的一个记事本，方便下次遇到同样问题时，以最快的速度解决掉遇到的问题。如果您发现哪里写的不对，欢迎给我留言，让我们一起进步。不胜感激！