CSS中的单位px、em、rem、vh、vw、vmin、vmax

1、px 相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2、em 相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
看下面例子:
HTML::

<body>body
<div class="div1">div1
    <div class="div2">div2
        <div class="div3">div3</div>
    </div>
</div>
</body>

CSS:

div{
    font-size:1.5em;
}

计算关系是这样的:

body的font-size是继承自跟元素html,html的尺寸是浏览器默认尺寸14px;
div1的font-size=1.5*14px = 21px;
div2的font-size=1.5*21px = 31.5px;
div3的font-size=1.5*31.5px = 47.25px;

如果手动设置div2的font-size为40px,div3的font-size应该为1.5*40px = 60px。

3、rem 相对长度单位。r’是“root”的缩写,相对于根元素<html>的字体大小。

例如还是上面的html代码,添加如下样式:

.div3{
    font-size:1.5rem;
}

这里写图片描述

此时div3的font-size = 1.514px = 1.5html的font-size

4、vh and vw 相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。

1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。

比如:浏览器高度900px,宽度为750px, 1 vh = 900px/100 = 9 px,1vw = 750px/100 = 7.5 px。

很容易实现与同屏幕等高的框:.slide { height: 100vh;}
设置一个和屏幕同宽的标题,h1{font-size:100vw},那标题的字体大小就会自动根据浏览器的宽度进行缩放,以达到字体和viewport大小同步的效果。

5、vmin and 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;
}

这里写图片描述

参考:
http://j.news.163.com/docs/99/2014111814/ABBB78BG00964KGG.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值