移动端适配vw方案

更新日期: 2020-12-01阅读: 1.9k标签: 移动端分享

复制链接

新浪微博

QQ 好友

扫一扫分享

1 前言

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

前面我们讲过两种等比缩放的方案：viewport缩放 和 动态REM，现在再讲另外一种不需要JavaScript的适配方案——vw适配方案。

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>

在写样式时会发现，虽然不用写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;
}

在正式的项目里，我们也可以用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;
}

4 适配方案对比

viewport缩放方案

适配原理简单
需要使用JS
直接使用设计稿标注无需换算
方案死板只能实现页面级别整体缩放

动态REM方案

适配原理稍复杂
需要使用JS
设计稿标注的px换算到CSS的rem计算简单
方案灵活技能实现整体缩放又能实现局部不缩放

vw方案

适配原理简单
不需要JS即可适配
设计稿标注的px换算到CSS的vw计算复杂
方案灵活技能实现整体缩放又能实现局部不缩放

5 最后

坚持写原创文章不容易，如果本文对你有帮助，点赞给我持续更新的动力。
最近的文章为前端剑指offer系列，是面向大厂求职的文章合集，关注公众号「 编程公子 」不错过每一次更新，也能加我的微信 hello_ruoyu (备注：知乎前端)一起交流。

来自：https://zhuanlan.zhihu.com/p/340299974

链接: https://fly63.com/article/detial/10040