CSS度量单位rem、em、vw、vh详解

CSS度量单位rem、em、vw、vh详解

单位说明兼容性
em相对长度单位,相对于当前对象内文本的字体尺寸, 根据父元素的大小变化而变化良好
rem相对长度单位,相对于跟元素( 即 html 元素)font-size 的倍数, 不会被它的父元素影响IE9+、火狐 3.6+、 safari5.0+
vw相对于视口的宽度, 视口被均分为 100 单位的vw高版本浏览器均支持
vh相对于视口的宽度, 视口被均分为 100 单位的vh高版本浏览器均支持

1、em

相当于“ 倍” ,比如设置当前的 div 字体大小为 1.5em,则当前的 div 的字
体大小为:当前 div 继承的字体大小*1.5 倍。
代码:

<style>
.div{font-size:20px;}
.p{font-size:2em;}
.span{font-size:0.5em;}
</style>

<div class="div">div 标签中的文字大小为 20px
<p class="p">P 标签中的文字大小为 2em
<span class="span">span标签中的文字大小为0.5em</span>
</p>
</div>

效果:

说明:
单位 em 是随着父元素大小的变化而变化,div 是 p 的父元素,p 是
span 的父元素,所以 p 标签的大小受制于 div 标签,span 标签的大小受制
于 p 标签,不受制于 div 标签。
div 标签的字体大小是 20px,p 标签的大小是 40px,span 标签的字体大小
是 20px

2、rem

这里的 r 是 root 的意思,就是相对于根节点来进行缩放,如果有嵌套的关
系,嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放
代码:

<style>
html{font-size:16px;}
.div{font-size:30px;background-color:pink;padding:50px;}
.p{font-size:1rem;}
.span{font-size:0.5rem;}
</style>

<div class="div">div 标签中的文字大小为 30px
<p class="p">P 标签中的文字大小为 1rem
<span class="span">span 标 签 中 的 文 字 大 小 为
0.5rem</span>
</p>
</div>

效果:

说明:
rem 单位是根据根节点的大小来设置的,也就是根据 html 的大小来
设置的,跟父元素没有关系,所以 p 标签的字体大小是 16px,span 标签的
字体大小是 8px。

3、vw 和 vh

全称是 Viewport Width 和 Viewport Height,视窗的宽度和高度,相当于
屏幕宽度和高度的 1%,不过,处理宽度的时候%单位更合适,处理高度的
话 vh 单位更好。
代码:

<style>
body{background-color:orange;}
.p{width:50vw;height:50vh;background-color:pink;fontsize:3em;}
</style>

<p class="p">P 标签的宽度为 50vw</p>

效果:

说明:
1 个 vw 相当于页面宽度的 1%,比如页面宽度是 1000px,那么 1vw
就是 10px,vh 同理。
P 标签的宽度是 50vw,所以就是页面宽度的 50%,高度是 50vh,所以就
是页面高度的 50%。

4、vmin 和 vmax

关于视口高度和宽度两者的最小值或者最大值。
比如,浏览器的宽度设置为1200px,高度设置为800px, 1vmax = 1200/100px = 12px, 1vmin = 800/100px = 8px。如果宽度设置为600px,高度设置为1080px, 1vmin就等于6px, 1vmax则未10.8px。

有一个元素,你需要让它始终在屏幕上可见:

.box { 
    height: 100vmin; 
    width: 100vmin;
}


如果你要让这个元素始终铺满整个视口的可见区域:

.box { 
height: 100vmax; 
width: 100vmax;
}

评论 1 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:创作都市 设计师:CSDN官方博客 返回首页

打赏作者

徐念安

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值