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.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 </head>
10 <!--
11 px、em、rem、vh、vw、vmin、vmax
12
13 px:绝对单位(无论何种设备,均使用同等大小)
14 em:相对于父类单位(上一级父类)
15 rem:相对于根目录大小(html)
16 vh:无论何种设备,相对于设备的百分比计算，viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
17 vw:和上面的描述一样，viewpoint height，视窗高度，1vh等于视窗高度的1%。
18 vmin:和上面的一样，vw和vh中较小的那个。
19 vmax:和上面的一样，vw和vh中较大的那个。
20
21 %:百分比
22 in:寸
23 cm:厘米
24 mm:毫米
25 pt:point/大约1/72寸
26 pc:pica/大约6pt,1/6寸
27
28
29 ex：
30 取当前作用效果的字体的x的高度，
31 在无法确定x高度的情况下以0.5em计算
32 (IE11及以下均不支持，
33 firefox/chrome/safari/opera/
34 ios safari/android browser4.4+等均需属性加么有前缀)
35
36 ch:
37 以节点所使用字体中的“0”字符为基准，
38 找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,
39 ios safari 7.1+,android browser4.4+支持)
40
41 支持度:
42 IE9+局部支持
43 chrome/firefox/safari/opera支持
44 iOS safari 8+支持
45 Android browser4.4+支持
46 chrome for android39支持
47 -->
48
49 <!--
50 局部bug:
51 Chrome默认是:12px.
52 不会小于10px(无论怎么设置)
53 -->
54
55 <style>
56 html {
57 font-size: 10px;
58 }
59
60 .first {
61 font-size: 1rem;
62 /*
63 0.5rem相对于跟目录的2倍,当设置在body上时.
64 */
65 /*
66 设置在跟目录上,1rem相对于原大小
67 */
68 /*
69 设置在父类上时,子类也会跟着改变
70 */
71 }
72
73 .two {
74 font-size: 1em;
75 /*em相对于父元素的大小: 1em=原大小、2em=父类的两倍大小
76 */
77 }
78
79 .three {
80 /* font-size: 1vh; */
81 font-size: 5vw;
82 /* 12*5 */
83 }
84
85 .four {
86 font-size: 72px;
87 }
88 </style>
89
90
91 <!-- <script>
92 var ele = document.getElementsByTagName("html")[0],
93 var size = document.body.clientWidth / 320 * 20;
94 ele.style.fontSize = size + "px";
95 </script> -->
96
97
98
99 <!--
100 手机端设备像素比例:3\2\1
101 -->
102
103 <!--
104 ps切图以最高高度保持一致
105 -->
106
107
108
109 <body>
110 <header>
111 <div class="first">
112 我10px大小,就不变小宰了我啊
113 <div class="two">
114 我跟着他,就不变大
115 </div>
116 </div>
117 </header>
118 <section>
119 <div class="three">
120 哈哈,我.. vh
121 </div>
122
123 <div class="four">
124 哈哈,px在此
125 </div>
126 </section>
127 <section>
128 <div class="five"></div>
129 <div class="six"></div>
130 </section>
131 <section>
132 </section>
133 <section></section>
134 <section></section>
135 <footer></footer>
136 </body>
137
138 </html>
