CSS3的新单位vw、vh、vmin、vmax

最新推荐文章于 2024-04-22 13:56:59 发布

今天也是爱大大的一天吖

最新推荐文章于 2024-04-22 13:56:59 发布

阅读量1.2k

点赞数 1

分类专栏： CSS 文章标签： css css3

原文链接：https://www.hangge.com/blog/cache/detail_1715.html

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

原文链接

一、基本说明

vw、vh、vmin、vmax的含义
（1）vw、vh、vmin、vmax是一种视窗单位，也是一种相对单位。它们相对的不是父节点或者页面的根节点，而是由视窗(Viewport)大小来决定的。视口被均分成100单位的vh，1vh代表类似于1%。
视窗(Viewport)是你的浏览器实际显示内容的区域（不包括工具栏和按钮的网页浏览器）。

示例代码：
```
h1{
font-size : 8vh;
}
```
如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即（8*200）/100
（2）具体描述：

vw：视窗宽度的百分比(1vw代表视窗的宽度的1%)
vh：视窗高度的百分比
vmin：当前vw和vh中较小的一个值
vmax：当前vw和vh中较大的一个值

vw和vh与%百分比的区别
（1）%是相对于父元素的大小设定的比率，vw、vh是视窗大小决定的。
（2）vw、vh优势在于能够直接获取高度，而用%在没有设置body高度的情况下，是无法正确获取可视区域的高度的。
vmin、vmax用处
做移动页面开发时，如果使用vw、vh设置字体大小(如5vw)，在竖屏和横屏状态下显示的字体大小是不一样的。由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。
浏览器兼容性
（1）桌面PC

Chrome：自 26 版起就完美支持（2013年2月）
Firefox：自 19 版起就完美支持（2013年1月）
Safari：自 6.1 版起就完美支持（2013年10月）
Opera：自 15 版起就完美支持（2013年7月）
IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）

（2）移动设备
Android：自 4.4 版起就完美支持（2013年12月）
iOS：自 iOS8 版起就完美支持（2014年9月）

二、一个简单的样例

代码
视窗（Viewport）单位除了可以用来设置元素的宽高尺寸，也可以在文本使用。下面使用vw设置字体大小来实现响应式文字。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding:0;
			border:0;
		}
		.demo1{
			width: 100vw;
			font-size: 5vw;
			margin: 0 auto;
			background-color: darksalmon;
			color: #fff;
		}
		.demo2{
			width: 80vw;
			font-size: 5vw;
			margin: 0 auto;
			background-color: deeppink;
		}
		.demo3{
			width: 50vw;
			height: 50vh;
			font-size: 1vw;
			margin: 0 auto;
			background-color: darkturquoise;
			color: #fff;

		}
	</style>
</head>
<body>
	<div class="demo1">
		<h1>宽度100%，字体5%</h1>
	</div>
	<div class="demo2">
		<h2>宽度80%，字体5%</h2>
	</div>
	<div class="demo3">
		<h3>宽度50%，字体1%</h3>
	</div>
</body>
</html>

效果图

改变窗口大小

三、实现完整覆盖的遮罩层

有时为了突出弹出框，或者避免页面元素被点击，我们需要一个覆盖整个可视区域的半透明遮罩，这个使用vw、vh就可以很轻易地实现。

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, 
	initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding:0;
			border:0;
		}
		button{
			width: 120px;
			height: 30px;
			color: #fff;
			font-family: "微软雅黑";
			font-size: 14px;
			background: #28B995;
		}
		#mask{
			width: 100vw;
			height: 100vh;
			/*实现遮罩层必备*/
			position: fixed;
			top: 0;
			left: 0;
			background: #000;
			display: none;
			/*不透明度*/
			opacity: 0.5;
		}
	</style>
</head>
<body>
	<button onclick="document.getElementById('mask').style.display='inline'">点击显示遮罩</button>
	<div id="mask" onclick="document.getElementById('mask').style.display='none'"></div>
</body>
</html>

效果图

四、实现居中显示地弹出框

弹出框大小随内容自适应
（1）样例效果图

点击弹出框按钮后，会显示一个在整个屏幕居中显示地弹出框。
弹出框的大小根据内容的大小自适应（图片）,同时弹出框后面还有个覆盖整个屏幕的半透明遮罩层。
弹出框的大小不随视窗大小的改变而改变
点击关闭按钮后，则隐藏弹出框。

（2）样例代码
遮罩层使用vw、vh实现全屏覆盖。弹出框添加到遮罩层中并居中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, 
	initial-scale=1.0">
	<title>Document</title>
	 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
	<style>
		*{
			margin: 0;
			padding:0;
			border:0;
		}
		/*按钮*/
		button{
			width: 120px;
			height: 30px;
			color: #fff;
			font-family: "微软雅黑";
			font-size: 14px;
			background: #28B995;
		}
		/*遮罩层样式*/
		.dialog-container{
			display: none;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0,0,0,.35);
			text-align: center;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
		}
		/*:after伪元素 在元素之后添加内容*/
		.dialog-container:after{
			display: inline-block;
			content: '';
			width: 0;
			height: 100%;
			vertical-align: middle;
		}
		/*弹出框*/
		.dialog-box{
			display: inline-block;
			border:1px solid #ccc;
			text-align: left;
			 vertical-align: middle;
			 position: relative;

		}
		/*弹出框标题*/
		.dialog-title{
			line-height: 28px;
			padding-left: 5px;
			padding-right: 5px;
			border-bottom: 1px solid #ccc;
			background-color: #eee;
			font-size: 12px;
			text-align: left;

		}
		/*弹出框关闭*/
		.dialog-close{
			position: absolute;
			top: 5px;
			right: 5px;
			font-size :12px;

		}
		/*弹出框内容*/
		.dialog-body{
			background-color: #fff;
		}
		
	</style>
</head>
<body>
	<button onclick="$('#dialogContainer').show();">点击显示弹出框</button>
	<div id='dialogContainer' class='dialog-container'>
		<div class="dialog-box">
			<div class="dialog-title">居中弹出框</div>
			<a onclick="$('#dialogContainer').hide();" class='dialog-close'>关闭</a>
			<div class="dialog-body">
				<img src="hudong!.jpg" alt="" class='demo-image'/>
			</div>
		</div>
	</div>
</body>
</html>

弹出框大小随视窗大小改变
（1）样例效果图

点击弹出按钮后，会显示一个在整个屏幕上居中显示的弹出框。
弹出框的大小不会再由内容的大小决定，而是随视窗大小改变（宽高均为屏幕可视区域的80%）。
点击关闭按钮后，则隐藏弹出框。
（2）样例代码
遮罩层使用vw、vh实现全屏覆盖，而弹出框的尺寸位置同样使用vw、vh设置。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, 
	initial-scale=1.0">
	<title>Document</title>
	 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
	<style>
		*{
			margin: 0;
			padding:0;
			border:0;
		}
		/*按钮*/
		button{
			width: 120px;
			height: 30px;
			color: #fff;
			font-family: "微软雅黑";
			font-size: 14px;
			background: #28B995;
		}
		/*遮罩层样式*/
		.dialog-container{
			display: none;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0,0,0,.35);
			text-align: center;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
		}
		/*:after伪元素 在元素之后添加内容*/
		.dialog-container:after{
			display: inline-block;
			content: '';
			width: 0;
			height: 100%;
			vertical-align: middle;
		}
		/*弹出框*/
		.dialog-box{
			top: 10vh;
			left: 10vw;
			position: absolute;
			width: 80vw;
			height: 80vh;
			/*图片靠左*/
			text-align: left;
			border: 1px solid #ccc;
			/*弹性布局*/
			display: flex;
			/*让元素沿垂直主轴从上往下垂直排列*/
			flex-direction: column;

		}
		/*弹出框标题*/
		.dialog-title{
			line-height: 28px;
			padding-left: 5px;
			padding-right: 5px;
			border-bottom: 1px solid #ccc;
			background-color: #eee;
			font-size: 12px;
			text-align: left;

		}
		/*弹出框关闭*/
		.dialog-close{
			position: absolute;
			top: 5px;
			right: 5px;
			font-size :12px;

		}
		/*弹出框内容*/
		.dialog-body{
			background-color: #fff;
			flex: 1;
			/*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容*/
			overflow: auto;
		}
		
	</style>
</head>
<body>
	<button onclick="$('#dialogContainer').show();">点击显示弹出框</button>
	<div id='dialogContainer' class='dialog-container'>
		<div class="dialog-box">
			<div class="dialog-title">居中弹出框</div>
			<a onclick="$('#dialogContainer').hide();" class='dialog-close'>关闭</a>
			<div class="dialog-body">
				<img src="hudong!.jpg" alt="" class='demo-image'/>
			</div>
		</div>
	</div>
</body>
</html>

五、显示大图时显示其最大尺寸

我们还可以通过视图单位来限制一些元素的最大宽度或高度，避免尺寸过大而超出屏幕。

效果图
（1）点击按钮，在屏幕中央显示原始图片的大图
（2）如果图片原始宽高均不超过屏幕宽高的90%，则显示图片的默认大小

（3）如果图片原始宽高均超过屏幕宽高的90%，则限制为屏幕的90%，使其能够完全显示。
样例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, 
	initial-scale=1.0">
	<title>Document</title>
	 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
	<style>
		*{
			margin: 0;
			padding:0;
			border:0;
		}
		/*按钮*/
		button{
			width: 120px;
			height: 30px;
			color: #fff;
			font-family: "微软雅黑";
			font-size: 14px;
			background: #28B995;
		}
		/*遮罩层样式*/
		.dialog-container{
			display: none;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0,0,0,.35);
			text-align: center;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
		}
		/*:after伪元素 在元素之后添加内容*/
		.dialog-container:after{
			display: inline-block;
			content: '';
			width: 0;
			height: 100%;
			vertical-align: middle;
		}
		/*弹出框*/
		.dialog-box{
			display: inline-block;
			text-align: left;
			vertical-align: middle;
			position: relative;

		}
		/*图片*/
		.demo-image{
			max-height: 90vh;
			max-width: 90vw;
		}
		
	</style>
</head>
<body>
	<button onclick="$('#dialogContainer').show();">点击显示大图</button>
	<div id='dialogContainer' class='dialog-container' onclick="$('#dialogContainer').hide();">
		<div class="dialog-box">
				<img src="hudong!.jpg" alt="" class='demo-image'/>
		</div>
	</div>
</body>
</html>

六、实现Word文档效果

效果图
（1）使用vh单位，我们可以把web页面做的像Office文档那样，一屏正好一页。改变浏览器创就尺寸，每页的大小也会随之变化。

（2）拖动滚动条，我们可以一直往下看到最后一页。
样例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, 
	initial-scale=1.0">
	<title>Document</title>
	 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
	<style>
		*{
			margin: 0;
			padding:0;
			border:0;
		}
		body{
			background-color: #789BC9;
		}
		page{
			display: block;
			/*每个page的高度*/
			height: 98vh;
			width: 69.3vw;
			margin: 1vh auto;
			padding:12vh;
			border: 1px solid #646464;
			/*阴影*/
			box-shadow: 0 0 15px rgba(0,0,0,.75);
			/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
			box-sizing: border-box;
			background-color: white;
			position: relative;
			text-align: center;

		}
		page:after{
			content: attr(data-page);
			color: graytext;
			font-size: 12px;
			text-align: center;
			bottom: 4vh;
			position: absolute;
			left: 10vh;
			right: 10vh;
		}
		a{
			color: #34538b;
			font-size: 14px;
		}
		
	</style>
</head>
<script>
	$(function(){
		var lenPage = $('page').length;
		//自动添加每页底部的页码
		$('page').each(function(i){
			$(this).attr('data-page','第'+(i+1)+'页,共'+lenPage+'页')
		})
	})
</script>
<body>
	<page><a href="http://hangge.com">欢迎访问 hangge.com</a></page>	
	<page></page>
	<page></page>
</body>
</html>

今天也是爱大大的一天吖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3的新单位vw、vh、vmin、vmax

vw、vh、vmin、vmax的含义（1）vw、vh、vmin、vmax是一种视窗单位，也是一种相对单位。它们相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的，单位1，代表类似于1%。视窗(Viewport)是你的浏览器实际显示内容的区域（不包括工具栏和按钮的网页浏览器）。（2）具体描述：vw：视窗宽度的百分比(1vw代表视窗的宽度为1%)vh：视窗高度的百分比vmin：当前vw和vh中较小的一个值vmax：当前vw和vh中较大的一个值vw和vh与%百分.
复制链接

扫一扫