移动适配-vw/wh

且陶陶

发布于 2023-04-12 15:25:04

3100

发布于 2023-04-12 15:25:04

文章被收录于专栏：Triciaの小世界Triciaの小世界

vw/vh

是相对单位

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

vw单位尺寸

1.确定设计稿对应的vw尺寸（1/100视口宽度）

查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸（1/100 视口宽度）

2.vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

vh单位尺寸

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

vw与vh不能混用。因为vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形

例子

vw

HTML文件：

<!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适配</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>

Less文件：

// out: ./demo.css

* {
    margin: 0;
    padding: 0;
}
/* 写一个68×29的盒子.设计稿宽度为 375
 1 vw = 3.75px */

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

vh

HTML文件：

<!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>vh</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>

Less文件：

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

/* 写一个68×29的盒子.设计稿高度为 667
 1 vh = 6.67px */
 .box {
     width: (68 / 6.67vh);
     height: (29 / 6.67vh);
     background-color: #246;
 }

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-03-27，如有侵权请联系 cloudcommunity@tencent.com 删除

html