px、em、rem、%、vw、vh、vm的区别

px、em、rem、%、vw、vh、vm的区别

px

px 就是 pixel 的缩写，意思是：像素

px 就是设备或者图片最小的一个点，比如常常听到的电脑像素是1920x1080的，表示的是水平方向是1920个像素点，垂直方向是1080个像素点。

px 是我们网页设计常用的基本单位。通过px可以设置固定的布局或者元素大小，缺点是不能弹性。

em

em的值并不是固定的，会继承父级元素的字体大小参考物是父元素的font-size（浏览器默认字体是16px），具有继承的特点。如果自身定义了 font-size 那么会按自身来计算，整个页面内1em不是一个固定的值。

rem

rem是相对于根元素 html，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高

例如：a设备屏幕宽100，1rem = 10px，b设备屏幕宽200，1rem自适应变为20px

%

一般来说就是相对于父元素的

• 对于普通定位元素就是我们理解的父元素
• 对于position: absolute；的元素是相对于已定位的父元素
• 对于position: fixed；的元素是相对于ViewPort（可视窗口）

vw

css3新单位，view width的简写，是指可视窗口的宽度。

举个例子：浏览器宽度 1920px，1vw = 1920px / 100 = 19.2px。

vh

css3新单位，view height的简写，是指可视窗口的高度。

举个例子：浏览器高度 900px，1vh = 900px / 100 = 9px。

vm

css3新单位，相对于视口的宽度或高度中较小的那个。最小的那个被均分为100单位的 vm

举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1vm = 900px / 100 = 9px。