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
版权

原文链接

一、基本说明

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

二、一个简单的样例

  1. 代码
    视窗（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>
  1. 效果图
    在这里插入图片描述
    改变窗口大小
    在这里插入图片描述

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

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

  1. 代码
<!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. 效果图
    在这里插入图片描述
    在这里插入图片描述

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

  1. 弹出框大小随内容自适应
    （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. 弹出框大小随视窗大小改变
    （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. 效果图
    （1）点击按钮，在屏幕中央显示原始图片的大图
    （2）如果图片原始宽高均不超过屏幕宽高的90%，则显示图片的默认大小
    在这里插入图片描述
    （3）如果图片原始宽高均超过屏幕宽高的90%，则限制为屏幕的90%，使其能够完全显示。
    在这里插入图片描述
  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;
		}
		/*按钮*/
		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. 效果图
    （1）使用vh单位，我们可以把web页面做的像Office文档那样，一屏正好一页。改变浏览器创就尺寸，每页的大小也会随之变化。
    在这里插入图片描述
    在这里插入图片描述
    （2）拖动滚动条，我们可以一直往下看到最后一页。
  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>
前端中几个单位（em、rem、vh、vw）的区别
Jenn168的博客
08-03 2162
1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。 2.rem 这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。 参照后面给的demo 3.vh vh就是当前屏幕可见高度的1%，也就是说 hei
浅谈css3新单位vw、vh、vmin、vmax的使用详解
09-24
主要介绍了浅谈css3新单位vw、vh、vmin、vmax的使用详解的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css3新单位
Whisper_a的专栏
08-15 517
单位 含义 em 相对于父元素的字体大小 ex 相对于小写字母"x"的高度 gd 一般用在东亚字体排版上，这个与英文并无关系 rem 相对于根元素字体大小 vw 相对于视窗的宽度：视窗宽度是100vw vh 相对于视窗的高度：视窗高度是100vh vm
vh、vw、vmin、vmax
qq_50276105的博客
10-15 646
百分比时基于父元素的长宽，而vh\vw\vmin\vmax基于屏幕可见视图的长或者宽。vmin:vh和vw之间选较小的值，vmax:vh和vw之间选较大的值。vh:指屏幕可见视窗的高，vw:指屏幕可见视窗的宽，
利用CSS3新单位rem实现响应
廿四桥明月夜的博客
01-05 262
做移动端的响应方法有很多，但是我喜欢用CSS3的新单位rem，这个单位非常好用（有个比它还好用的单位vh，不过兼容性太差，不考虑了），根据不同屏幕，设置不同的基准值，从而实现适配各个屏幕尺寸的移动设备。慕课网有一套非常不错的讲关于rem的视频，这里推荐给大家http://www.imooc.com/learn/494。 rem—-CSS3中新增的单位，兼容性还不错，常用于移动端实现字体的响应，与
css3新单位vw、vh、vmin、vmax的使用介绍
qq_40055200的博客
07-19 295
css3新单位vw、vh、vmin、vmax的使用介绍 - 走看看
css3新单位vw、vh的使用教程
09-24
总结来说，CSS3的vw、vh、vmin和vmax单位为网页设计和开发提供了新的工具，它们有助于简化响应式网页的设计，并使得布局和字体大小的调整更加直观和有效。开发者应根据实际项目需求和浏览器兼容性，合理选择单位并...
css3新单位vw、vh、vmin、vmax的使用详解
精灵码农
12-19 692
css3新单位vw、vh、vmin、vmax的使用详解 1，vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位1，代表类似于1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。 （...
css3新单位vw、vh、vmin、vmax深度解析与应用实例
本文将详细介绍CSS3中的四个新单位vw、vh、vmin和vmax，这些单位是视窗单位，与传统的百分比单位有显著区别。vw表示视窗宽度的1%，vh则是视窗高度的1%，vmin取两者中的最小值，vmax取两者中的最大值。它们与百分比的...
CSS-vmin&vmax单位
最新发布
若末lan的博客
04-22 463
例如，如果视口宽度为 800px，高度为 1000px，那么 1vmax 等于 10px（1000px 的 1%）。例如，如果视口宽度为 800px，高度为 1000px，那么 1vmin 等于 8px（800px 的 1%）。vmin和vmax是相对于窗口视图来说的，与父级元素等无关，vmin 和 vmax 单位。
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
ybh756784818的博客
04-08 3569
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
em,rem,vh,vw,vmin,vmax
Jone's Area
08-20 445
css的单位越来越多了，怕混淆，记个小本本 一、em和rem 1)、em 当前字体大小。如果你在body元素上设置一个字体大小，那么在body元素内的任何子元素的em值都等于这个字体大小。 如果body中的div字体大小写了 x em,那么实际这个font-size就等于x乘以body的font-size值 html,body{ font-size:10px; } div{ ...
CSS3 的单位vw、vh、px，em，rem
丁哒哒的博客
10-24 760
1、px px其实就是像素的意思，全称pixel，也就是图像的基本采样单位。对于不同的设备，它的图像基本单位是不同的，比如显示器和打印机。而我们通常所说的显示器分辨率是指桌面设定的分辨率，不是显示器的物理分辨率，但是现在我们的桌面分辨率和物理分辨率几乎是一致的，因为这样显示效果最佳。所以总的来说px就是对应我们显示器的分辨率。这样就会有个问题就是如果使用px的话我们就要根据不同电脑的分辨率来做自...
CSS单位 vh vw vmin vmax rem
数星星的夜晚
05-01 591
盒模型 * {margin:0; padding:0;} 垂直方向上的外边距会叠加 水平外边距不叠加 p {font-size:1em; margin:.75em 30px;} 垂直间距始终会保持为字体高度的四分之三 待续...
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
09-24
CSS3中的长度单位用于表示网页中元素的尺寸、间距、位置等属性，主要包括像素单位(px)、相对长度单位(em、rem)、视口单位(vh、vw、vmin、vmax)以及其它一些单位(如%、in、cm、mm、pt、pc、ex、ch等)。以下是对这些...
CSS 中的vh、vw单位
热门推荐
全易
09-30 2万+
vw： 视窗宽度的百分比（1vw 代表视窗的宽度为 1%） vh： 视窗高度的百分比（ 1vh 代表视窗的高度为 1%） vmin：当前 vw 和 vh 中较小的一个值 vmax：当前 vw 和 vh 中较大的一个值 vw、vh与 % 的区别： % 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。 vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body高...
css 布局 单位 vh
qq_35226176的博客
01-28 452
vh 可视区域单位 vh：1vh等于视口高度的1%，100则满屏，50则半屏 详细请看 css3自适应布局单位vw,vh详解
css单位-vh/vw
qq_43260366的博客
09-03 1843
视口单位(Viewport units) 1.什么是视口？ 在pc端，视口指的是浏览器的可视区域； 在移动端，它涉及3个视口： Layout Viewport（布局视口）， Visual Viewport（视觉视口）， Ideal Viewport（理想视口） 2.视口单位中的“视口”： 在pc端，指的是浏览器的可视区域； 在移动端，指的就是Viewport中的Layout Viewport(布局视口) 即window.innerWidth/window.innerHeight大小
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值