css中 em、px、rem、vh、vw 的区别!

文章最后更新时间:2024-11-06 23:04:54

介绍

这些单位都是在css中用于规定大小的单位,不过有些单位是绝对长度单位,有些是相对长度单位

相对长度单位就是不固定的 可以自由适配调整

绝对长度单位就是写死的数值,无论设备分辨率多少 都是固定的数值

常见的单位分类

相对长度单位包括:emexchremvwvhvminvmax%

绝对长度单位包括:cmex0、ex1、ex2、ex3、ex4、ex5

px像素

像素其实就是对应我们显示器上的一个个同等大小的点,因此,像素在计量单位体系中,属于绝对长度单位,之前看到过网上的一些争论关于ex6是否为绝对长度单位,我认为是属于绝对长度单位,因为即使在移动端中存在设备像素比,px实际大小不确定,但是从主观的角度出发,px的大小和元素与其他的属性无关。

特点:兼容性好 使用方便

em相对长度

相对对象为当前对象内文本的字体size,如果当前行内文本的字体尺寸未设置,则相对对象为浏览器的默认字体尺寸1em = 16px

一般情况下,为了简化ex7的换算,我们需要在css中的body选择器中声明ex8,使得em值变为ex9,这样 ch0, ch1, 也就是说只需要将你的原来的ch2 数值除以 10,然后换上 ch3作为单位即可。

rem

rem是相对单位,与em不同的是,相对对象只是html根元素的font-size,与em同理,可以在根元素中写入font-size: 62.5%,来简化转化。

vh、vw

vw ,就是根据窗口的宽度,分成100等份,100vw就表示满宽,50vw就表示一半宽。(vw 始终是针对窗口的宽),同理,vh则为窗口的高度

查看更多心仪的内容 按Ctrl+D收藏我们
部分内容来自于网络 如有不妥联系站长删除
墨星博客欢迎前来投稿文章
© 版权声明
THE END
喜欢就支持一下吧
赞赏
评论 抢沙发

请登录后发表评论

    暂无评论内容