css media 媒體查詢

時間 2019-12-08

標籤 css media 媒體查詢欄目 CSS 简体版

原文原文鏈接

 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，也一樣大於1000html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。