pxemrem.三者的区别与共同点

前言&＃xff1a;在写页面的时候对页面的布局和样式的设置必然少不了像素的操作。比如&＃xff1a;字体的大小&＃xff0c;盒子之间的距离。下面我就给简单的给大家介绍下px,em,rem以及他们相同点与区别。

相同点&＃xff1a;

px、em、rem都是计量单位&＃xff0c;都能表示尺寸。

不同点&＃xff1a;

Px表示“绝对尺寸”&＃xff08;并非真正的绝对&＃xff09;&＃xff0c;实际上就是css中定义的像素&＃xff08;此像素与设备的物理像素有一定的区别&＃xff0c;后续详细说明见文末说明1&＃xff09;&＃xff0c;利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化&＃xff0c;因此一般不用于响应式网站。

em表示相对尺寸&＃xff0c;其相对于当前对象内文本的font-size&＃xff08;如果当前对象内文本的font-size计量单位也是em&＃xff0c;则当前对象内文本的font-size的参考对象为父元素文本font-size&＃xff09;。使用em可以较好的相应设备屏幕尺寸的变化&＃xff0c;但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size&＃xff0c;如有遗漏可能会导致错误。

rem也表示相对尺寸&＃xff0c;其参考对象为根元素的font-size&＃xff0c;因此只需要确定这一个font-size。

结尾&＃xff1a;

分享&＃xff1a;没有收拾残局的能力&＃xff0c;就别放纵善变的情绪&＃xff01;