css media 媒體查詢
阿新 • • 發佈：2018-11-11
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