当前位置：网站首页>移动适配：vw/vh

移动适配：vw/vh

2022-07-04 06:41:00 【HHppGo】

`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;
}