1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 div{ margin: 0;padding: 0;
8 height: 100px;
9 border: 1px solid red;
10 box-sizing: border-box;
11
12 float: left;
13 }
14 /*屏幕大于1000的时候一行6个
15 屏幕大于800的时候一行3个
16 屏幕大于600的时候一行2个
17 屏幕大于400的时候一行一个
18 */
19 @media all and (min-width: 400px) {
20 div{width: 100%;}
21 }
22 @media all and (min-width: 600px) {
23 div{width: 50%;}
24 }
25 @media all and (min-width: 800px) {
26 div{width: 33.3333%;}
27 }
28 @media all and (min-width: 1000px) {
29 div{width: 16.666666%;}
30 }
31
32 </style>
33 </head>
34 <body>
35 <div>1</div>
36 <div>2</div>
37 <div>3</div>
38 <div>4</div>
39 <div>5</div>
40 <div>6</div>
41 </body>
42 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4
阅读背景：
css media 媒体查询
来源：互联网
分享到：
