px、em、rem、vw、vh、vmax、vmin的区别

px是绝对单位还是相对单位 ？

按照 CSS 规范的定义

，CSS 中的 px 是一个相对长度，它相对的，通常就是电脑显示器。通常电脑显示器的分辨率是96DPI，也就是1像素为1/96英寸

一般来说，px 就是对应设备的物理像素，

• 物理像素，设备能控制显示的最小物理单位，iphone7 分辨率 750*1334 指的是物理像

  素

• 逻辑像素，虚拟的，css 使用的就是逻辑像素，视口大小 375*667 说的是逻辑像素

参考链接：https://blog.csdn.net/weixin_34388207/article/details/91364300

参考链接：https://blog.csdn.net/qq_33834489/article/details/79247119

各距离单位的区别

• px：相对长度单位，是相对于显示器的屏幕分辨率而言的。

  优点：比较稳定和精确；

  缺点：如果用户对浏览器进行缩放，这时会使用我们的Web页面布局被打破；

• em：相对单位，基准点为父节点字体的大小.
• rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算.

  CSS3新加属性，chrome/firefox/IE9+支持)

  另外需注意chrome强制最小字体为12号，即使设置成 10px, 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取

• vw：viewpoint width，视窗宽度，1vw等于浏览器窗口宽度的1%。
• vh：viewpoint height，视窗高度，1vh等于浏览器窗口高度的1%。
• vmin：vw和vh中较小的那个。
• vmax：vw和vh中较大的那个。
• grid布局中的fr:一个自适应单位，用于在一系列长度值中分配剩余空间，剩下的空间是按照各自的数字按比例分配。

vw, vh, vmin, vmax支持情况：

IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持

grid布局中的fr支持情况

ie11及其以上； Chrome40及其以上；

rem的优势

由于现在屏幕分辨率千差万别，我们只要将rem与屏幕分辨率(px)关联起来，就可以实现页面的整体缩放（适应各种尺寸的屏幕）

rem的缺点

一方面，使用rem单位，有时候在小屏幕上,可能会使得字体模糊（放大/缩小的原因）

另一方面，使用rem来定义图片、视频尺寸时，有时候会使得图片视频在pc上正常显示，但在mobile上感觉过小，影响整体效果； 或在mobile上正常显示，到pc上时，图片变形，图片模糊等；