像素

px 像素单位,(一个显示器屏幕分辨率是像素的集合,因此px像素也是绝对单位,是计算机系统的数字化图像长度单位);

em是相对长度单位,相当于当前对象内文本的字体尺寸,如果当前对行内文本的字体尺寸未被人为设置,则继承其父元素,倘若父节点也未设置,再向上继承,直至浏览器默认字体尺寸。

rem是css3新增的一个相对长度单位,使用rem为元素设定字体大小时,相对于的是HTML元素。

在页面开发自适应的过程中,rem和em是经常用的两个单位。

rem是基于HTML页面的根元素的大小为基准,而em则是使用它的大小决定。em和rem都是灵活的,可扩展的单位,由浏览器转换为像素值,具体的取决于您的设计中的字体大小。

 如:

1 .div-class{
2    font-size:16px;
3    padding:1em;
4 }

它被浏览器翻译为

 ...
    font-size:16px;
    padding-bottom:16px;
    padding-left:16px;
    padding-right:16px;
    padding-top:16px;
    
...

rem和em的区别:

  em和rem单位之间的区别是浏览器根据哪一值参考转化成像素,当使用rem单位,他们转化为像素大小取决于根元素的字体大小,即html元素的字体大小;当使用em单位时,像素值将是em值乘以使用em单位的元素的字体大小。

  有一种说法是,em单位相对父元素的字体大小,这种情况的发生,是因为子元素继承了父元素的字体大小导致。

 html元素的字体大小,首先会来自浏览器设置,在代码中需显示确定。

未完,待续......
原文地址:https://www.cnblogs.com/zhishiyv/p/13724923.html