Html5移動端頁面自適應百分比佈局

時間 2019-11-13

原文原文鏈接

按百分比佈局,精度確定不會有rem精確html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
 7     <title>Document</title>
 8     <style>
 9         * {
10             padding: 0;
11             margin: 0;
12         }
13         
14         .one {
15             width: 20%;
16             height: 100px;
17             float: left;
18             background: red;
19         }
20         
21         .two {
22             width: 30%;
23             height: 100px;
24             float: left;
25             background: blue;
26         }
27         
28         .three {
29             width: 50%;
30             height: 100px;
31             float: left;
32             background: green;
33         }
34         
35         .four {
36             width: 50%;
37             height: 50%;
38             background: #fff;
39         }
40     </style>
41 </head>
42 
43 <body>
44     <div class="one"></div>
45     <div class="two"></div>
46     <div class="three">
47         <div class="four"></div>
48     </div>
49 
50 </body>
51 
52 </html>

meta就很少說了,一樣在meta標籤內佈局

<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">spa

在body下面有三個div,其中第一個div樣式以下,scala

.one {
width: 20%;
height: 100px;
float: left;
background: red;
}code

在樣式裏面,能夠看到width我設置爲20%,在以容器body爲父級
htm

佔據body的width的20%blog

可是height沒法被設置爲百分比,爲何?由於沒法肯定父級容器body的heightthree

總之一句話，要想設置當前容器的高度或寬度百分比，必須「明確」知道父容器的高度或寬度

因此height只能用px來表示rem

能夠看到在上面的例子中截取的代碼it

 1 .three {
 2             width: 50%;
 3             height: 100px;
 4             float: left;
 5             background: green;
 6         }
 7         
 8         .four {
 9             width: 50%;
10             height: 50%;
11             background: #fff;
12         }
13 
14 <div class="three">
15         <div class="four"></div>
16 </div>