一、px
px 其实是一个相对单位的虚拟像素。
因为不同的设备在大小宽高相同时，他们的物理像素 (pt) 大小也可能是不同的。物理像素高的设备，单位面积内存放的像素点就多，因此画质看起来更精细。
通常，在 PC 端，CSS 的 px就接近与实际的物理像素大小。
但移动端上，根据机型的分辨率大小，css 中的 px可能对应不同数量的物理像素点。
比如 iPhone 5 使用的是 Retina 视网膜屏幕，使用 2px 2px 的 设备像素 代表 1px 1px 的 css 像素。所以设备像素数为 640 x 1136px时，CSS 逻辑像素数为 320 x 568px
特点：常用基本单位，可以固定设置布局或者元素的大小
缺点：没有弹性，大小死板，使用在多端的页面上时，无法做到适应效果
二、%
不同的 css 属性，使用%，百分比参考的对象是不同的
先理解元素的包含块是谁，不能简单的认为是父元素
- 元素是静态定位和相对定位，其包含块是其父元素
- 元素是绝对定位，其包含块应该是离它最近的 position 为非 static 属性的祖先元素
- 如果是固定定位的元素，它的包含块是视窗（viewport）
下面列出不同 css 属性的参考对象
- 参考包含块的宽度
left / right / width / max-width / min-width / margin / padding / text-indent
- 参考包含块的高度
top / bottom / height / max-height / min-height
- 参考自身宽高
border-radius / background-size / transform: translate() / transform-origin / zoom / clip-path
- 参考自身字体大小
line-height
- 参考自身的行高
vertical-align
- 参考继承字体大小
font-size
百分比的继承
如果某个元素设置了百分比的属性，则后代元素继承的是计算后的值。例如
p {font-size: 10px;line-height: 130%;}// 由于 p 的行高计算值为13px，所以其子元素，行高也为13px
三、vh (css3)
view height 的缩写。
它相对于视窗的高度， 1vh 即视窗高度的 1%
四、vw (css3)
view width 的缩写。
它相对于视窗的宽度， 1vw 即视窗宽度的 1%
五、vmax (css3)
vmax 是在视口中选取宽度或高度其中大的一个，然后像 vw 和 vh 一样分为 100 等分。
六、vmin (css3)
vmin 是在视口中选取宽度或高度其中小的一个，然后像 vw 和 vh 一样分为 100 等分。
七、em
它是相对于字体大小来计算的一个尺寸，它是字体大小的倍数，如 em 相对的字体大小为 16px ，那么 1em = 16px
使用 em 单位的元素如果自身设置了字体大小，那么就相对于自身进行计算。否则就会相对最近的有设置字体大小的祖先元素进行计算。如果页面中没有设置字体大小，那么就会以浏览器的默认字体大小 16px 为基准。
八、rem (css3)
rem 只会相对于 html 根元素的字体大小，也就是说如果根元素字体设置为 18px ，那么全局内 rem 的值换算都为 1rem = 18px
补充：
rem在响应式页面中经常使用到，因为我们可以根据不同的设备尺寸，去动态调整根元素的大小，使用rem单元达到适配不同尺寸设备的效果，有些自适应的页面框架单位上的使用就是基于此特性。- 有时我们为了换算方便会将根元素的字体大小先设置为
62.5%，然后根据需要进行调整，原因是62.5% * 16px = 10px，此时也就是1rem = 10px
九、rpx (upx)
响应式 px单位
由小程序最先提出，为了解决 px在移动端上不同机型容易出现的变形问题
以 微信小程序 对rpx实现为例
微信小程序规定屏幕的基准宽度为 750rpx
对 iPhone6 而言，屏幕宽度为 375px，把它分为 750rpx 后， 1rpx = 0.5px
参考资料
若有收获，就点个赞吧
0 人点赞
