前端像素单位=px+vh+%+vm+……

#非原创#原文出处在底部

1.px

1. px=pixel的缩写，意为像素 。
2. px就是设备或者照片最小的一个点。如像素为1024x768，就是说水平方向是1024个像素点，垂直方向是768个像素点。
3. 是网页设计常用的单位，也是基本单位。
4. 可通过px设置固定的布局或者元素大小。
5. 缺点：没有弹性。

2.rpx

1. rpx是微信小程序解决自适应屏幕尺寸的尺寸单位。
2. （rpx = responsive pixel）可以根据屏幕宽度进行自适应。
3. 微信小程序规定屏幕的宽度为750rpx
4. 解释：如宽度，相当于把屏幕宽度氛围750份，1份就是1rpx。高度类似~

3.em

1. 参考物是父元素的 font-size，具有继承的特点。
2. 如果自身定义了 font-size 按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
3. 特点一：em的值并不是固定的；特点二：em会继承父级元素的字体大小。
4. 1em = 1 倍父元素 font-size 的值，2em=2 倍父元素 font-size 的值，以此类推……

4.rem

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

5.%

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

1. 对于普通定位元素，就是我们理解的父元素
2. 对于 position: absolute; 的元素是相对于已定位的父元素
3. 对于 position: flex; 的元素是相对于ViewPort（可视窗口）

6.vw

1. css3新单位，vw = view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那100vw就是1200px，10vw就是120px，以此类推……
2. 举个栗子：浏览器宽度1200px，1vw = 1200px/100 = 12px。

7.vh

和vw类似(都有点类似于百分比的意思)

1. CSS3新单位，vh = view height的简写，是指可视窗口的宽度。假如宽度是1200px的话，那100vh就是1200px，10vh就是120px，以此类推……
2. 举个栗子：浏览器高度为1200px，1vh = 1200px/100 = 12px。

8.vm

1. CSS3新单位，相对于视口的宽度或高度中较小的那个，其中最小的那个被均分为100单位的vm。举个栗子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1vm = 900px/100 = 9px
2. 兼容性较差，不建议使用

9.some emmm

比如说，我根据rem诚意根元素 font-size 算出的px值有小数，最终是零点几px咋整，不同浏览器对这个支持好吃呢高度不同，有的只渲染处零点几px对应的物理像素，有的干脆都显示1px，后果就是，同样的rem值在不同dpr的设备上宽度不同，最常见的就是边框，有的设备上显得特别宽，很别扭，也就是经典的1px边框问题。
这个问题的解决方案也有很多，可以通过设置1px，然后根据不同dpr，设置不同的缩放来做，当然也有其他的方案。我这里只是想说rem带来的一些问题。

10.像素比和宽度比

像素比：dpr是设备像素比，也就是css的设备无关像素px和物理像素的比
宽度比：开发适配的设备的宽度（现在一般是iphone6），和实际的设备的宽度的比
综上所述：像素比实现高清，宽度比实现适配

---

这篇是我自己重新写了一遍，非原创。 原作者声明如下： 版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 原文章链接：https://blog.csdn.net/weixin_42941619/article/details/104612783