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 手机端设备像素比例:321 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>