• 移动适配：vw/vh

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

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

    vw适配原理

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

    vw单位尺寸

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

    vh适配原理

    vh单位尺寸

    1. 确定设计稿对应的vh尺寸（1/100视口高度）
      – 查看设计稿宽度 -> 确定参考设备高度(视口高度）-> 确定vh尺寸（1/100视口高度）
    2. 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，参照设备宽度

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
  • 相关阅读:
    【黑马云盘 Debug】ASSERT: “i ＞= 0 && i ＜ size()“
    springboot MongoDB 主从 多数据源
    【无标题】
    java-php-net-python-二手书商城系统计算机毕业设计程序
    怎样下载和安装HBuilder软件？【附HBuilder快捷键】
    查看nginx当前并发连接数 - 修改最高并发数
    2-35 基于matlab的四足液压机器人设计程序
    Visual Studio 中的键盘快捷方式大全
    bp神经网络中bp是什么意思,bp神经网络是什么网络
    使用dumuz应用淘宝-收藏的宝贝批量下载导出
  • 原文地址：https://blog.csdn.net/asacmxjc/article/details/125510315