Html5移动端页面自适应百分比布局

按百分比布局,精度肯定不会有rem精确

 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">

在body下面有三个div,其中第一个div样式如下,

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

在样式里面,可以看到width我设置为20%,在以容器body为父级

占据body的width的20%

但是height无法被设置为百分比,为什么?因为无法确定父级容器body的height

总之一句话，要想设置当前容器的高度或宽度百分比，必须“明确”知道父容器的高度或宽度

所以height只能用px来表示

可以看到在上面的例子中截取的代码

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

在已经确定父级div的宽高的情况下,子级div就可以用百分比来表示了,截图如下