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。