px,em,rem的关系

之前听人说过,网站制作中字体单位应该用em而不用px,为什么呢?原因简单来说就是em支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。px是绝对单位,不支持IE的缩放,而em是相对单位支持字体缩放。


而rem是一个更好的东西。如果没有兼容IE8的顾虑(rem需要IE8+才支持,rem适用于多语言模版的网站),rem可以说是一个非常理想的单位。rem和em一样是相对单位,只是有别于em相对于父元素,rem相对于根元素html,即root em。
在网页设计中我们经常看见html{font-size: 62.5%;}这样的设置,为什么偏偏是62.5%呢?这主要是为了方便em与px相互转换,em的初始值为1em=16px,当设置了html{font-size: 62.5%;}时,1em则=16px*62.5%=10px,1.2em则=12px,这样就简单明了多了。

总结:rem是基于根元素的相对扁平级联计算单位,典型适用于需要整体调整字体大小的场景,如多语言网站。

补充,在上面操作的基础上在谷歌浏览器当中,如果你设置1rem;结果得到的不是10px而是12px,这是因为谷歌浏览器默认设置最小字体为12px,这时候我们只需设置下浏览器最小字体就可以得到1rem为10px了。

调为10px然后按“完成”按钮即可。

原文地址:https://www.cnblogs.com/jewave/p/5082568.html