css3新单位vw、vh、vmin、vmax做响应式布局

步浪
2017-03-12
CSS
2983

一、硬知识介绍：

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

上一篇tp框架下，使用ajaxfileupload插件做ajax上传，并实时预览

下一篇tp框架下的微信模板消息