一、硬知识介绍:

  1、vw:按照viewport宽度的百分比计算盒子的宽度或字体的大小;

  2、vh:按照viewport高度的百分比计算盒子的高度;

  3、vmin:对比viewport的宽度和高度,按照小的做百分比计算;

  4、vmax:对比viewport的宽度和高度,按照大的做百分比计算;

二、代码展示:

<html>
<head>
<title>css3新单位vw、vh、vmin、vmax</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0px;padding:0px;color:#fff;text-align: center;}
p{margin:0px auto;}
.text1{width:100vw;height:10vh;background:blue;font-size:3vw;line-height:10vh;}
.text2{width:80vw;height:20vh;background:red;font-size:3vw;line-height:20vh;}
.text3{width:60vw;height:30vh;background:green;font-size:3vmin;line-height:30vh;}
.text4{width:40vw;height:40vh;background:yellow;font-size:3vmax;line-height:40vh;}
</style>
</head>
<body>
<p class="text1">步浪博客</p>
<p class="text2">步浪博客</p>
<p class="text3">步浪博客</p>
<p class="text4">步浪博客</p>
</body>
</html>

三、效果展示:

QQ截图20170312150011.png

官方公众号