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,这样      1  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元素的大小是一样的

html{
    font-size:62.5%; /* 10÷16=62.5% */     /*关键代码*/
}
body{
    font-size:12px;
    font-size:1.2rem ; /* 12÷10=1.2 */  /* 这两个效果一样*/
}
#p1{
    font-size:14px;
}
#p2{
    font-size:14rem;
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值