移动Web学习04

原创 已于 2025-05-09 12:45:31 修改 · 317 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #学习

于 2024-03-08 00:12:14 首次发布
本文详细介绍了vw和vh这两个用于移动端适配的相对单位，包括它们的计算方式、布局应用示例以及vh单位在全面屏设备中的注意事项，帮助开发者理解和使用这些单位进行响应式设计。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

四、移动适配 - vw

1、适配方案

  • 相对单位
  • 相对视口的尺寸计算结果
  • vw：viewport width
    • 1vw = 1/100视口宽度
  • vh：viewport height
    • 1vh = 1/100视口宽度

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* vw 和 vh 是相对视口宽高计算结果，可以直接实现移动端适配效果 */
        /* .box {
            width: 50vw;
            height: 30vw;
            background-color: pink;
        } */
        .box {
            width: 50vh;
            height: 30vh;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2、vw 布局

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

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="./demo.css">
</head>
<body>
   <div class="box"></div>
</body>
</html>

Less 示例：

// .box {
//     width: (68 / 3.75vw);
//     height: (29 / 3.75vw);
//     background-color: pink;
// }
.box {
   width: (68 / 6.67vh);
   height: (29 / 6.67vh);
   background-color: green;
}
// px单位尺寸 / 1/100 视口的宽度或高度

3、vh单位问题

  • 开发中，vw和vh不能混用。
  • vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值