丁鹿学堂：移动端开发之css常用单位总结

css中常见的单位

我们使用css的长度单位，最常用的是px。其实，css中除了px 之外，还有很多长度单位。今天就跟大家分享一下。

css中长度单位的分类

我们把css中的长度单位分成两类。
一类是绝对长度单位。
绝对长度单位不受其他任何东西的影响，在不同的分辨率下，它也会保持不同的大小。
在实际生活中，这样的单位有很多，比如m，cm等，但是在前端代码中，我们只有一个绝对长度单位，就是px（像素）
一类是相对长度单位
相对长度单位，是相对于别的参考决定本身的长度大小。
比如，基于氟元素的字体大小，或者视口的大小。
使用相对单位的好处是，就在不同的页面上都有相对一样的布局。比如当你的屏幕变大的时候，可以同步的进行缩放。

相对单位之em

em相对的是本身的font-size，如果自己没有设置font-size，会相当于父元素的font-size
这个实际开发中很少用

相对单位之rem

rem相对的是html标签的font-size
利用rem可以比较方便的做适配。比如在不同的屏幕尺寸下，只需要修改html的font-size，所有使用rem的单位都会相应改变。
目前主流移动端开发已经不使用了，但是还是有公司在使用，比如淘宝。

相对单位之vw和vh

vw全称就是viewport width，vw就是相对于视口的宽度。1vw 就是百分之的视口宽度。比如你视口宽度是1200px， 那么1vw = 12px
所以100vw在任何时候，都是100%宽度。

.box{
  width: 100vw;
  height: 100vh;
  background: greenyellow;
}
1
2
3
4
5