媒体查询（pc端，移动端不同布局）

最新推荐文章于 2022-11-04 09:51:43 发布

adtowzpo775078

最新推荐文章于 2022-11-04 09:51:43 发布

阅读量618

点赞数

原文链接：http://www.cnblogs.com/fengxiaopiaoer/p/5723075.html

版权

媒体查询语法：

1.内联写法：and之后必须有空格
@media screen and (min-width:960px //判断浏览器大小条件){
body{background：red} //常规的样式
}

2.外联写法：当满足屏幕满足条件的时候连接href后的css文件
<link='stylesheet' media='screen and (min-width:960)' href='xx.css'/>
<link='stylesheet' media='screen and (min-width:960) and (max-width:1960)' href='xx.css'/>

媒体查询根据不同屏幕显示不同界面有两种方式：
1.在不同的媒体查询判定的大括号后写不同的样式
2.写两个相同的HTML内部的内容，通过媒体查询判断界面后，显示一个，隐藏另一个

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4 <meta charset="UTF-8">
 5 <title></title>
 6 <style>
 7 *{
 8 margin: 0;
 9 padding: 0;
10 }
11 .big{                 /*1*/
12 width: 1000px;
13 outline: 1px solid #000;
14 margin: auto;
15 color: #fff;
16 }
17 .big>div{
18 width: 50%;
19 height: 200px;
20 outline: 1px dashed yellow;
21 background: orange;
22 float: left;
23 }
24 .big2{                            /*2*/
25 width: 600px;
26 outline: 1px solid #000;
27 margin: auto;
28 color: #fff;
29 display: none;
30 }
31 .big2>div{
32 width: 100%;
33 height: 200px;
34 outline: 1px dashed yellow;
35 background: lightpink;
36 clear: both;
37 }
38 @media screen and (max-width: 640px) {
39 .big{display: none}
40 .big2{display: block}
41 }
42 </style>
43 </head>
44 <body>
45 <div class="big">
46 <div>1</div>
47 <div>2</div>
48 <div>3</div>
49 <div>4</div>
50 <div>5</div>
51 <div>6</div>
52 </div>
53 
54 <div class="big2">
55 <div>1</div>
56 <div>2</div>
57 <div>3</div>
58 <div>4</div>
59 <div>5</div>
60 <div>6</div>
61 </div>
62 </body>
63 </html>