px、em、rem、vw、vh、vmin、vmax 的含义
px
:绝对单位,页面按精准像素展现
em
:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算;em不是一个固定的值,可以设置`body{font-size:62.5%}
rem
:相对单位,可以理解为"root em",相对根节点html 的字体大小来计算,css3新增加属性。
vw
:viewpoint width,视窗宽度,1vw 等于视窗宽度的1%。
vh
:viewpoint height,视窗高度,1vh 等于视窗高度的1%。
vmin
:vw和vh较小的那个。
vmax
:vw和vh较大的那个。
vw、vh 与 % 百分比的区别
- % 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。
- vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。
vmin、vmax 用处
移动页面开发时,如果使用 vw、wh 设置字体大小(比如 5vw),在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。
实用案例
- 用
width:100vw;height:100vw;background:rgba(0,0,0,.5);position:fixed;left:0;top:0
来做遮罩层
- 字体大小随页面的宽度而定,如
width:100vw;font-size:5vw;
表示宽度100vw;字体是宽度的5%。
- 弹出框大小随内容自适应:遮罩层使用 vw、vh 实现全屏覆盖。弹出框添加到遮罩层中并居中。
.dialog-container {
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
}
.dialog-container:after {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
}
.dialog-box {
display: inline-block;
}
<div class="dialog-container">
<div class="dialog-box">
<img src="./images/3.jpg" class="demo-image" width="800px"/>
</div>
</div>