css中字体单位px,pt,em ,rem,百分比之间的区别和用法

标签：重写   time   用法   而不是   color   att   span   repeat   mil   

css中字体单位px,pt,em ,rem,百分比之间的区别和用法

px 即像素，一般国内网站使用较多,默认大小是16px;

pt 印刷行业常用单位

em  相对单位，相对父元素属性的单位 ，一般用于移动端布局

rem  结合相对定位和绝对定位的优势，相对根元素html，想要修改字体大小，只要修改html的大小就可以了

转换公式：

pt=px乘以3/4
倍数em=倍数x16px

注意：1em=16px。那么12px=0.75em,10px=0.625em。

1.em的用法

 在代码重写的过程中，为了简化font-size的换算，在body选择器中声明font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了.步骤如下：

  1).body选择器中声明Font-size=62.5%；
  2).将你的原来的px数值除以10，然后换上em作为单位；
   此时有的字体会大的出奇，因为em的值不固定，又会继承父级元素的大小，比如

body{font-size=62.5%；}  ①  
div{font-size:1.2em；}   ②  
p{font-size:1.2em；}  ③  

       解释： 其中p属于div的子集，①的设置使12px=1.2em,10px=1em,px和em成十倍关系；所以②的设置使得div字体大小为1.2em=12px;③中p的大小设置是相对②中div字体来说的，所以p的字体大小是1.2*12px=14.4px;而不是十倍关系了；
  3).重新计算那些被放大的字体的em数值。避免字体大小的重复声明，也就是避免以上提到的，将③改为p{font-size:1em;}即可。

2.rem的用法

   p1元素和p2元素的大小是一样的

tml{  
 font-size:62.5%; /* 10÷16=62.5% */     /*关键代码*/  
 }  
 body{  
 font-size:1.2rem ; /* 12÷10=1.2 */  <span style="font-family: 微软雅黑, 宋体;">/* 这两个效果一样*/</span>  
 }  
 #p1{  
 font-size:14px;

} 

<pre name="code" class="html">#p2{  
    font-size:14rem;  
 }</pre>  
 <pre></pre>  
 <pre></pre> 

css中字体单位px,pt,em ,rem,百分比之间的区别和用法

标签：重写   time   用法   而不是   color   att   span   repeat   mil   

原文地址：http://www.cnblogs.com/liuyishi/p/6683866.html