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%;
margin属性值可以为百分比
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 {
width: 20%;
height: 100px;
float: left;
background: red;
}
在样式⾥⾯，可以看到width我设置为20%，在以容器body为⽗级
占据body的width的20%
但是height⽆法被设置为百分⽐，为什么?因为⽆法确定⽗级容器body的height
总之⼀句话，要想设置当前容器的⾼度或宽度百分⽐，必须“明确”知道⽗容器的⾼度或宽度
所以height只能⽤px来表⽰
可以看到在上⾯的例⼦中截取的代码
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>
在已经确定⽗级div的宽⾼的情况下,⼦级div就可以⽤百分⽐来表⽰了，截图如下

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。