移动适配：vw/vh

最新推荐文章于 2024-03-13 14:35:41 发布

HHppGo

最新推荐文章于 2024-03-13 14:35:41 发布

阅读量331

点赞数 1

分类专栏：移动Web开发文章标签： css 前端 html

本文为博主原创文章，转载请在显著位置标明本文出处以及作者网名，未经作者允许不得用于商业目的。

本文链接：https://blog.csdn.net/asacmxjc/article/details/125510315

版权

移动Web开发专栏收录该内容

17 篇文章 1 订阅

订阅专栏

`vw/vh`

目标：能够使用`vw单位`设置网页元素的`尺寸`

相对单位
相对视口的尺寸计算结果

vw：viewport width
– 1vw = 1/100 视口宽度
vh：viewport height
– 1vh = 1/100 视口高度

代码：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>体验vw和vh</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}


		/* 需求：分别使用vw和vh设置盒子大小 
		vw: 参照视口宽度计算结果，1/100 
		vh: 参照视口高度计算结果，1/100 */

		.box {
			width: 50vw;
			height: 30vw;
			background-color: pink;
		}

		/* 
		.box {
			width: 50vh;
			height: 30vh;
			background-color: pink;
		} */
	</style>
</head>

<body>
	<div class="box"></div>
</body>

</html>

请添加图片描述
在这里插入图片描述

`vw`适配原理

目标：实现在`不同宽度`的设备中，网页元素尺寸`等比缩放`效果

vw单位尺寸

确定设计稿对应的vw尺寸（1/100视口宽度）
– 查看设计稿宽度 -> 确定参考设备宽度(视口宽度）-> 确定vw尺寸（1/100视口宽度）
vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度)

`vh`适配原理

vh单位尺寸

确定设计稿对应的vh尺寸（1/100视口高度）
– 查看设计稿宽度 -> 确定参考设备高度(视口高度）-> 确定vh尺寸（1/100视口高度）
vh单位的尺寸 = px单位数值 / ( 1/100 视口高度)

less代码：

// out: ./
* {
	margin: 0;
	padding: 0;
}


// 需求：分别使用vw和vh设置 68px * 29px的盒子大小
// 设计稿是视口宽度375px，视口高度667px的

// .box {
// 	width: (68/3.75vw);;
//     height: (29/3.75vw);;
// 	background-color: pink;
// }


.box {
	width: (68/6.67vh);;
    height: (29/6.67vh);;
	background-color: green;
}


// 提示：以上二选一即可，但在工作中，通常使用vw，参照设备宽度

vw和vh的混用(`不能够`)

// out: ./
* {
	margin: 0;
	padding: 0;
}

// 测试：vw和vh混合使用，设置68px * 29px的盒子（设计稿是 375px的）
// 设计稿 375px * 667px
// 提示：工作中，vw和vh不要混用，因为遇到全面屏盒子尺寸跟设计稿会不一样的

.box {
	width: (68/3.75vw);
	
	height: (29/6.67vh);
	background-color: blue;
}