前言:在写页面的时候对页面的布局和样式的设置必然少不了像素的操作。比如:字体的大小,盒子之间的距离。下面我就给简单的给大家介绍下px,em,rem以及他们相同点与区别。
相同点:
px、em、rem都是计量单位,都能表示尺寸。
不同点:
Px表示“绝对尺寸”(并非真正的绝对),实际上就是css中定义的像素(此像素与设备的物理像素有一定的区别,后续详细说明见文末说明1),利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化,因此一般不用于响应式网站。
em表示相对尺寸,其相对于当前对象内文本的font-size(如果当前对象内文本的font-size计量单位也是em,则当前对象内文本的font-size的参考对象为父元素文本font-size)。使用em可以较好的相应设备屏幕尺寸的变化,但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size,如有遗漏可能会导致错误。
rem也表示相对尺寸,其参考对象为根元素<html>的font-size,因此只需要确定这一个font-size。
结尾:
分享:没有收拾残局的能力,就别放纵善变的情绪!