css media 媒体查询 

 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>

注意顺序 大于400， 也同样大于1000

posted @ 2018-11-11 22:51  万物皆object  阅读(136)  评论(0)  编辑  收藏  举报