css网页单位 

  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>

 

posted @ 2017-12-05 15:56  Sunsin  阅读(177)  评论(0)    收藏  举报