一、硬知识介绍:
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>
三、效果展示: