HTML与CSS学习第15天

HTML学习第15天

在这里插入图片描述

1. 长度定位（vw/vh）

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

1.1 vw

vw：viewport width
1vw=1/100视口宽度

1.2 vh

vh：viewport height
1vh=1/100视口高度

1.3 根据设计稿确定对应的vh尺寸

vw单位尺寸：
1. 查看设计稿宽度
2. 确定参考设备宽度（视口宽度）
3. 确定vm尺寸
vw单位尺寸计算
- vw单位的尺寸=px单位数值/(1/100视口宽度)
vh单位尺寸：
1. 查看设计稿宽度
2. 确定参考设备宽度（视口高度）
3. 确定vh尺寸
vh单位尺寸计算
- vh单位的尺寸=px单位数值/(1/100视口高度)

示例：vw初体验

 <!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>Document</title>
    <style>
        /* 清除默认边距 */
        *{
            margin: 0;
            padding: 0;
        }
 
        /* 1vw=1/100视口宽度，自动实现适配，不需要媒体查询，不需要js */
        .box{
            width: 50vw;
            height: 30vw;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果图

在这里插入图片描述

示例：vh初体验

 <!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>Document</title>
    <style>
        .box{
            /* 1vh=1/100视口高度 */
            width: 50vh;
            height: 30vh;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果图

示例：vw与vh的计算

 // out:./
 
*{
    margin: 0;
    padding: 0;
}
 
.box{
    // vw的转换，69px*28px
    width: (69/3.75vw);
    height: (28/3.75vw);
    background-color: pink;
}
 
.box2{
    // vh的转换
    width: (69/5.68vw);
    height: (28/5.68vw);
    background-color: blue;
}

注意点

vw和vh不要混用，可能会导致在另一台设备上不保持等比缩放
- **例子：375 * 667的屏与375 * 812的屏，如果宽度用3.75vw，高度用6.67vh，375 667的屏长宽比为宽度/3.75 3.75 ：高度/6.67 * 6.67，而375 * 812的屏，长宽比为宽度/3.75 * 3.75：高度/6.67 * 8.12，变换后盒子不等比例缩放

posted @ 2022-02-24 22:36 凌歆阅读(21) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· HTML与CSS学习第12天

· HTML与CSS学习第13天

· 移动适配-vw/wh

· No.2.6

· 前端基础进阶6

公告

昵称：凌歆
园龄： 2年1个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

HTML与CSS学习第15天

HTML学习第15天

目录

1. 长度定位（vw/vh）

1.1 vw

1.2 vh

1.3 根据设计稿确定对应的vh尺寸

示例：vw初体验

示例：vh初体验

示例：vw与vh的计算

注意点

公告

搜索

常用链接

我的标签

随笔分类 (68)

随笔档案 (142)

阅读排行榜

	<!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>Document</title>
	<style>
	/* 清除默认边距 */
	*{
	margin: 0;
	padding: 0;
	}

	/* 1vw=1/100视口宽度，自动实现适配，不需要媒体查询，不需要js */
	.box{
	width: 50vw;
	height: 30vw;
	background-color: pink;
	}
	</style>
	</head>
	<body>
	<div class="box"></div>
	</body>
	</html>

	// out:./

	*{
	margin: 0;
	padding: 0;
	}

	.box{
	// vw的转换，69px*28px
	width: (69/3.75vw);
	height: (28/3.75vw);
	background-color: pink;
	}

	.box2{
	// vh的转换
	width: (69/5.68vw);
	height: (28/5.68vw);
	background-color: blue;
	}