丁鹿学堂:移动端开发之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;
}

你可能感兴趣的:(前端培训丁鹿学堂分享站,css,html,前端)