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