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;
}