最近学习文档的过程中,发现了一些陌生的面孔,来学习总结一下。
1、px:相对长度单位。像素单位,相对于显示器屏幕分辨率而言,是一个固定的大小。
2、em:相对长度单位。相对于父级元素的字体大小,如果父元素未设置字体大小,则相对于浏览器的默认字体尺寸。
3、rem:相对长度单位。相对于根元素<html>
的字体大小。
vh、vw、vmin、vmax是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。
4、vh:视窗高度的百分比(1vw 代表视窗的宽度为 1%)
5、vw:视窗宽度的百分比
6、vmin:当前 vw 和 vh 中较小的一个值
7、vmax:当前 vw 和 vh 中较大的一个值
TIPS:这种视窗百分比与%的区别在于:%是相对于父元素的比率,如果父元素没有设置高度是没法获取到百分比的高度。但是,视窗百分比是相对于窗口大小的,不存在这个问题,而且我们通常设置alert蒙层的时候是窗口的大小,直接设置100vw/100vh是很方便的。
<html>
<body>
<div class="div1">
第一层<div class="div2">
第二层<div class="div3">
第三层
</div>
</div>
</div>
<div class="box"></div>
</body>
</html>
<style>
body,html{font-size: 14px;}
.div1{font-size: 1.5em;} /*em是相对于父级body的fontSize,计算公式 1.5*14=21px*/
.div2{font-size: 2em;} /*em是相对于父级div1的fontSize,计算公式 2*21=42px*/
.div3{font-size: 2rem;} /*rem是相对于根节点html的fontSize,计算公式 2*14=28px*/
body{width: 100vw;height: 100vh;background: #ccc} /*body宽高==可视窗口区域宽高*/
.box{width: 100vmin;height:100vmin} /*屏幕375*667,100vmin==375px,100vmax==667px*/
</style>