CSS3中的rem、em与px间的换算关系
2020-01-20 本文已影响0人
西瓜鱼仔
px
Pixel像素，相对长度单位。像素是相对于显示器分辨率而言。
em
相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1em = 16px。
有时为简化font-size的换算，需要在css中的body选择器中声明
font-size = 62.5%，此时1em = 16px*62.5% = 10px，这样12px = 1.2em,10px = 1em，也就是说换算时只需将原有px数值除以10，然后换上em作为单位即可。
由上可见，em的值并不是固定的，它的值跟其父级元素的字体大小紧密相关。
示例：
<html>
<div>
<p> 你猜我字体是多大？</p>
</div>
</html>
/******css样式*********/
html{
font-size:62.5% //font-size:10px 1em:10px
}
div{
font-size:1.2em //font-size: 10 *1.2 =12px
}
p{
font-size:1.2em //font-size= 12*1.2=14.4px
}
rem
rem是CSS3新增的一个相对单位（root em，根em），这个单位与em有什么区别呢？
区别在于使用rem为元素设定字体大小时，虽然仍是相对大小，但相对的只是HTML 根元素。通过rem，既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前除IE8及更早版本外，所有浏览器均已支持rem。对于不支持的浏览器，可以多写一个绝对单位的声明。如此浏览器会忽略rem设定的字体大小。如下：
p{
font-size:14px;
font-size:2rem;
}
注意：
- 若没有在根元素（html字体）指定参照值，那浏览器默认1rem 就是16px，若指定值，则1rem就是指定值 。
- html设置为62.5%或者10px 时会失效，是因为小于12px或者75%的字体大小不支持换算。这可能与有些浏览器不支持12px 以下的大小有关。所以，使用rem单位，html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。
px、em、rem转换工具
px、em、rem在线转换工具：http://pxtoem.com/
参考自：https://blog.csdn.net/qq_41893551/article/details/81258600
