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

243 阅读2分钟
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;
}