web前端网页单位、像素、px、rpx、em、rem、vw、vh、vm、%

---

前言背景

随着Web的发展，对新的适配解决方案需求也会继续增大，对网页的要求更高。网页设计单位涉及到布局效果，不同的页面布局和设备需要采用不同的单位。而且现在都是要求响应式设计，需要适配各种设备，电脑，手机，平板。如果单位不合适，可能在这个设备显示良好，在那个设备布局就会错乱。所以需要选择合适的单位来进行设计开发。

---

1、px

px就是pixel的缩写，意为像素。
px就是设备或者图片最小的一个点。比如常常听到的电脑像素是1024 x 768，表示的是水平方向是1024个像素点，垂直方向是768个像素点。
px是我们网页设计常用的单位，也是基本单位。
通过px可以设置固定的布局或者元素大小。
缺点是没有弹性。

---

2、rpx

rpx是微信小程序和uniApp解决自适应屏幕尺寸的尺寸单位。
rpx的全称为responsive pixel，可以根据屏幕宽度进行自适应。
微信小程序规定屏幕的宽度为750rpx。相当于把屏幕宽度分为750份，1份就是1rpx，高度也类似。

---

3、em

参考物是父元素的font-size，有继承的特点。
自身定义font-size，就按自身来计算，浏览器默认字体是16px，整个页面内1em不是一个固定的值。
em的值并不是固定，相对于font-size而计算；em会继承父级元素的字体大小。
1em等于1倍父元素font-size的值，2em等于2倍父元素font-size的值，以此类推。

---

4、rem

rem是相对于根元素html的font-size值决定。这样就意味着，我们只需要在根元素确定一个参考值，设计html的font-size大小为10px，到时设置1.2rem就是12px，以此类推。
优点是只需要设置根目录的大小就可以把整个页面的比例调好。

---

5、vw

css3新单位，是view width的简写，指可视窗口的宽度。假如宽度是1200px，那100vw就是1200px，10vw就是120px，以此类推。
例如浏览器宽为1200px，值为12px，100 / 1200 * 12 = 1vw。**

---

6、vh

与vw相似。
css3新单位，view height的简写，指可视窗口的高度。假如高度是900px。那100vh就是900px，10vh就是90px，以此类推。
例如浏览器高为900px, 值为9px，100 / 900 * 9 = 1vh。

7、vm

css3新单位，相对于视口的宽度或高度中较小的值。其中最小的那个被均分为100个单位的vm，假如浏览器高度为900px，宽度为1200px，取最小的浏览器高度，100 / 900 * 9 = 1vm。
兼容性差 ,不建议使用。

---

8、%

一般来说就是相对于父元素
对于普通定位元素就是我们理解的父元素
position: absolute;元素是相对于已定位的父元素
position: fixed;元素是相对于ViewPort可视窗口进行定位