移动端适配vw方案

时间: 2020-12-01阅读: 463标签: 移动端

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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/10040

vconsole_移动端h5开启控制台的实现

开发内嵌在 web,可能会遇到意想不到的 bug,所以你需要你能在手机上查看的控制台。前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好,所以最近使用了vConsole 进行调试。

移动端尺寸基础知识

初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白,感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起,理清关于尺寸的所有细节

移动端 h5 ios不能自动播放音乐的问题解决

如果我们想要在一个页面自动播放背景音乐或是其他音频,在真机上往往需要使用一些其他方法才可以,比如ios是没办法调用audio.play()事件直接调用,非得添加手动点击事件才可以。接下来就说说我在项目里遇到的困难和解决办法

移动端点击事件延迟的诞生消亡史

快速反馈对于任何 UI 的实现都是至关重要的。研究表明,100ms 是界面让用户感到即时的最大延迟。尽管如此,移动网络仍然受到一个巨大的反馈问题的困扰

移动端数字键盘遇到的知识点

ios 点击事件会出现闪屏效果,解决方法。click事件的300ms延迟响应,touch会有穿透效果。js判断小数点的位数

移动端缩放解决方案 hammerjs

本方案适合各种前端成熟框架,以 ionic3为例子,第一步 安装 hammerjs:npm install hammerjs;第二步 写核心缩放功能

总结几个移动端H5软键盘的大坑

部分机型软键盘弹起挡住原来的视图解决方法:可以通过监听移动端软键盘弹起,Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。参数如下。

移动端如何强制页面横屏

有些机型有些app不能横屏:比如Android的微信就没有横屏模式,而ios的微信能开启横屏模式。解决办法就是在竖屏模式下,写一个横屏的div,然后设置rotate正(负)90度,把他旋转过来;而且如果用户切到横屏时,需要把rotate复原,要求也能正常展现。

解决移动端点击穿透问题_h5实现移动端点击事件穿透的多种解决方案

移动端点透现象的解决办法:解决方案一:来得很直接github上有个fastclick可以完美解决;解决方案二:用touchend代替tap事件并阻止掉时A元素touchend的默认行为preventDefault(),从而阻止click事件的产生;解决方案三:延迟一定的时间(300ms+)来处理事件...

移动端实现表头固定,tbody滚动的三种方法

实现表头固定,tbody垂直滚动。准备工作:获取页面可是区域高度。方法一:两个table,第一个table放表头,第二个table方内容,通过JS实现监听滚动事件,动态控制表头位置

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!