1. px
如果全篇用px布局会暗藏一个蛋疼的问题，就是当用户和Ctrl滚页面的时候（说白了就是ctrl+，ctrl-），你会发现页面结构产生了不可预知的错乱，因此有砖家倡导使用em替代px
2. em
px是绝对单位，1px就是1px，2px就是2px，以此类推，而em是相对单位，em相对的基准点就是浏览器的字体大小，浏览器默认字体大小是16px，也就是1em默认等于16px，如果你想给某个文字设定为14px，就这样写 font-size:0.875em; 公式是14/16=0.875em。
<html>上重定义基准字号** html {font-size:62.5%}** ，此时页面基准字号就是 16px * 62.5% = 10px , 那么此时 1em = 10px，那么此时14px = 1.4em，15px=1.5em
em准确的说是相对于父节点的字号来计算的，如果自身定义了字号那么就相对自身字号来计算
html { font-size: 100%; }.box-0 { height: 1em; /* 此时height等于16px */}.box-1 {
font-size: 0.625em; /* 此时基准字号以变更为16*0.625=10px */
height: 1em; /* 此时实际height等于10px */}整个页面内1em并不是一个固定不变的值，1em不停的变换，css3为我们引入一个新的单位就是rem可以解决这个问题。
3. rem
rem和em一样也是一个相对单位，为了方便理解，我们就理解rem为root em，顾名思义rem只相对跟节点<html>计算，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同em，默认1rem=16px; 同理你可以设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。
作者：wen4e
链接：https://www.jianshu.com/p/d3b35d12f9f8
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦