Dimples's blog Dimples's blog
首页
  • 前端随笔

    • React
  • 系列文章

    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript》笔记
  • 后端文章

    • Java
    • Python
    • 数据库
  • 学习笔记

    • 《Rust》笔记
    • 《SpringBoot》笔记
    • 《Django》笔记
    • 《Docker》笔记
    • 《Python爬虫》笔记
技术分享
友情链接
索引
关于
GitHub (opens new window)

DimplesY

不会写代码
首页
  • 前端随笔

    • React
  • 系列文章

    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript》笔记
  • 后端文章

    • Java
    • Python
    • 数据库
  • 学习笔记

    • 《Rust》笔记
    • 《SpringBoot》笔记
    • 《Django》笔记
    • 《Docker》笔记
    • 《Python爬虫》笔记
技术分享
友情链接
索引
关于
GitHub (opens new window)
  • PicGo+Gitee构建图床
  • 个人常用的Prettier配置
  • 移动端适配viewport缩放方案
  • 移动端适配vw方案
  • 移动端适配动态rem方案
  • package.json中script的生命周期
  • 个人技术分享
DimplesY
2021-10-11

移动端适配vw方案

# 1、前言

设计师交付给前端开发一张宽度为750px的视觉稿,设计稿上元素的尺寸、颜色、位置等已做过标注,要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。

# 2、原理

vw是相对单位,1vw表示屏幕宽度的1%。基于此,我们可以把所有需要适配屏幕大小等比缩放的元素都使用vw做为单位。不需要缩放的元素使用px做单位。

举个例子。设计师交付的设计稿宽度是750px,设计稿上一个标题的fontSize标注尺寸是32px。(32/750)*100% = 4.27% ,换句话说这个标题的字号占屏幕宽度的占比是4.27%,不管任何屏幕都是如此。4.27% 即 4.27vw。

对于任何需要等比缩放的元素,在写CSS设置样式时直接换算成vw即可,尺寸 = 100vw*设计稿标注大小/设计稿宽度。

# 3、适配代码

假设设计稿尺寸是750px,页面有一个按钮,按钮文字标注大小28px,按钮高度标注为48px,宽度为120px,边框为1px不缩放。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .button {
      width: 16vw;        /*  100vw*120/750  */
      font-size: 3.73vw;  /*  100vw*28/750  */
      line-height: 6.4vw; /*  100vw*48/750  */
      border: 1px solid #000; /*不需要缩放的部分用px*/
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="button">按钮</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在写样式时会发现,虽然不用写JS做适配,但标注尺寸换算为vw又麻烦又不直观。

我们可以在CSS里使用calc来换算换,只不过需要注意新语法的兼容性。

:root {
  --ratio: calc(100vw/750);
}
.button {
  font-size: calc(100vw*28/750);  /* 可以直接用calc */
  line-height: calc(100vw*48/750);
  
  width: calc(120*var(--ratio));  /* 也可以用calc配合var使用,IE不支持var */     
  border: 1px solid #000; /*不需要缩放的部分用px*/
  text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11

在正式的项目里,我们也可以用SCSS,把换算交给预处理器

@function px2vw($px) {
  @return $px * 100vw / 750;
}
.button {
  width: px2vw(120);
  font-size: px2vw(28);
  line-height: px2vw(48);
  border: 1px solid #000;
  text-align: center;
}
1
2
3
4
5
6
7
8
9
10

# 4、适配方案对比

  • viewport缩放方案
    • 适配原理简单
    • 需要使用JS
    • 直接使用设计稿标注无需换算
    • 方案死板只能实现页面级别整体缩放
  • 动态REM方案
    • 适配原理稍复杂
    • 需要使用JS
    • 设计稿标注的px换算到CSS的rem计算简单
    • 方案灵活技能实现整体缩放又能实现局部不缩放
  • vw方案
    • 适配原理简单
    • 不需要JS即可适配
    • 设计稿标注的px换算到CSS的vw计算复杂
    • 方案灵活技能实现整体缩放又能实现局部不缩放
帮助我修改此页面 (opens new window)
#CSS
上次更新: 2022/11/20, 18:28:09
移动端适配viewport缩放方案
移动端适配动态rem方案

← 移动端适配viewport缩放方案 移动端适配动态rem方案→

最近更新
01
使用 strapi 快速构建 API 和 CMS 管理系统
03-03
02
Rust 开发环境
11-26
03
使用 paka.dev 为 npm 包生成文档
11-24
更多文章>
Theme by Vdoing | Copyright © 2020-2025 Dimples YJ | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式