关于前端:谈谈-H5-移动端适配原理

前言

欢送关注同名公众号《熊的猫》，文章会同步更新，也可疾速退出前端交换群！

H5 挪动端 开发的必不可少的一个环节就是 挪动端网页的适配 ，因为 UI 通常只会提供 大小固定的设计稿，而各种不同挪动设施具备不同的页面分辨率和大小，所以适配的目标就是让一份设计稿在不同挪动设施上体现出一致性。

尽管现如今各种插件都能够帮忙咱们疾速配置实现，例如 lib-flexible、postcss-pxtorem、postcss-px-to-viewport 等等，但不少小伙伴在被问及相干原理时却很难说分明，那么本篇文章咱们就一起来探索一下其中原理吧！！！

文中有不当之处，欢送在评论区斧正！！！

CSS 中的尺寸单位

在理解具体的适配计划之前，咱们先把 CSS 中适配会波及到的相干尺寸单位进行一个理解吧，总结起来就是一句话：CSS 中的尺寸单位都是 绝对长度单位，只是绝对的指标不同。

px 像素单位

px 全称为 pixel（像素 ），它是绝对于 屏幕显示器分辨率（桌面设定的分辨率，不是显示器的物理分辨率 ） 而言的，在 雷同 / 不同 的设施上 1px 示意多个 设施像素。

当 一个像素点越大 时, 出现的图像就会 越含糊 ；当一个像素点越小时, 像素点就会 越密集 , 出现的图像就会 越清晰。

![image.png]()

em 绝对单位

好多人都认为 em 就是绝对于 父元素 font-size，实际上在不同的 CSS 属性当中应用 em 其绝对的指标也是不同，如下：

• 用于 font-size 中则是绝对于 父元素 font-size 大小

• 用于 其余属性（如 width，height） 中应用是绝对于 本身 font-size 大小

值得注意的是，若 以后元素 / 父元素 的 font-size 未设置，因为 font-size 属性值可被继承的起因，可逐级向上查找，最终找不到则绝对于浏览器默认字体大小，即 font-size = 16px。

rem (root em) 绝对单位

rem 是 CSS3 新增的一个绝对单位，它只绝对于 根元素 html 的 font-size 字体大小，rem 与 em 的区别在于：

• rem 绝对于 html 根元素的，因而在 body 标签外面设置 font-size 是不起作用的
• 因而 rem 就可做到 指标元素 与 根元素 间放弃 成比例 的大小关系，又能够防止字体大小逐层复合的连锁反应等，例如公共的字体大小能够在 body 中设置即可

![image.png](/img/bVc9qTy)

!

vw 和 vh

vw 全称是 viewport width，代表的是 视口的宽度 ，绝对于 视口 viewport 的 宽度

vh 全称是 viewport height，代表的是 视口的高度 ，绝对于 视口 viewport 的 高度

vw 和 vh 是将 视口 宽 / 高 都分成 100 份，因而 100vw = 视口宽、100vh = 视口高

与之相干的还有 vmin 和 vmax 两个单位

• vmin 和 vmax 代表的是 视口宽度 和 视口高度 中的 最小值 和 最大值
• vmin = 视口高度 vh 和 宽度 vw 间的最小值
• vmax = 视口高度 vh 和 宽度 vw 间的最大值

适配计划

rem 适配（等比适配）

外围原理

• 将 设施视口 划分成 n 份，n 能够是 任何正确的值（如 flexible.js 中的 n = 10）

  • 设置 设施视口 根元素 html 的 font-size = 设施视口宽 ÷ 份数 n，即失去 设施视口 1 rem 到底示意 多少设施视口 px

• 将 设计稿 也同样划分成 n 份，此时 设计稿中的 a px 对应 设施视口 b rem 的计算形式为

  • 设施视口 b rem = 设计稿 a px ÷ (设计稿 宽 ÷ n 份)

举个例子

设施视口宽为 375px

• 将设施视口分成 10 份，设置 根元素 html 的 font-size = 375 ÷ 10 = 37.5 px，即 1 rem = 37.5 px

  (function (n = 10){
      const dEl = document.documentElement;
      
      function setRem(){
          const rem = dEl.clientWidth / n;
          dEl.style.fontSize = rem  + 'px';
      }
  
      // 初始化执行
      setRem()
  
      // 视口大小变动时执行
      window.onresize = setRem
  })()

设计稿宽为 750px

• 将 设计稿 也分成 10 份，每份大小 = 750 ÷ 10 = 75 px

• 此时 设计稿 上的 "点我拍照"（font-size: 34px） 的文案转换成合乎 设施视口 对应的 rem 就为：

  • 设施视口 中 文字 font-size = 34 ÷ 75 = 0.4533333333333333 rem ≈ 0.45 rem

【留神 】个别计算结果（ 人为计算、插件自动化自动化计算）都不会应用这么长的小数位，比方 0.4533333333333333 rem ≈ 0.45 rem，此时：

• 原始值 0.4533333333333333 rem = 0.4533333333333333 * 37.5 = 17 px
• 保留两位小数后的值 0.45 rem = 0.45 * 37.5 = 16.875 px

而在肉眼察看下 16.875 px 和 17 px 是没有差异的，因而能够忽略不计

用 amfe-flexible 和 postcss-pxtorem 验证

• 文本和原始款式

• amfe-flexible 和 postcss-pxtorem 配置

• 最终展现成果

晚期 rem 适配优化（过期计划，理解即可）

在晚期还没有各种 CSS 预处理器 和 自动化计算的插件 时（ 即 还须要人为计算时 ），上述 rem 适配的计划 有一个毛病，那就是针对 设计稿中不同的 px 的转换为 设施视口 rem 的计算过程还是比拟繁琐，特地是一些比拟难算的数值。

例如，上述将 设计稿 34px 转换为 设施视口 0.9rem 的例子，对大部分人来说是不能 间接 / 疾速 看到设计稿中 px 的数值就能间接算出其对应的 rem 单位的数值的，因而须要进行优化。

而 优化 的外围就是 将 简单计算 变成 简略计算 ，例如在 宽 750 px 的设计稿中：

• 34px 转换成 rem = 34 ÷ 75，这种不直观的计算叫 简单计算 ，若能够实现 34 ÷ 100 即可失去相应的 rem 的形式，就称为 简略计算 （ 任何数除以 10 或 100 都很容易口算）

也就是说，如果咱们心愿所有设计稿上 px 的计算都是 简略计算 ，那么咱们就须要保障其 渲染后果 是正确的即可，换句话说，就是咱们须要调整设施视口的 1 rem = n px 中 n 的值让其可能满足 34 ÷ 100 = 0.34 rem 的状况下还可能被失常渲染为 17 px 即可，这无非就波及到一个数学倍数计算而已，就不过多开展了。

vw/vh 适配

后面说过，vw 和 vh 是将 视口 宽 / 高 都分成 100 份，绝对于 设施视口 375px 来说 1vw = 375 ÷ 100 = 3.75px。

通过了 rem 适配计划 的介绍，vw/vh 这种适配形式就是相当于把替换了本来的 rem 单位，因而，这个形式的计算形式和 rem 的形式 一模一样，区别就在于：

• rem 的适配形式反对自定义将设施视口划分为 n 份，n 能够是任何正确值
• vw/vh 就是将设施视口划分为 100 份，不反对自定义

因而，假如将 设计稿 750px 中的 34px 转换为 设施视口 n vw 就等于 n = 34 ÷ 7.5 = 4.533333333333333 vw ≈ 4.53 vw。

CSS 预处理器 — 简化计算

如果应用的是 CSS 预处理器（Less、Sass），那么就能够通过定义一个全局的 函数 来帮忙咱们进行运算，例如：

• Less 中 px2vw() 的定义：

  // plugin.js
  module.exports = {install: function (less, pluginManager, functions) {functions.add('px2vw', (param, perVW) => {if (!param.value) return '0vw'
        if (!perVW.value) return param.value + 'px'
  
        return Number(param.value) / perVW.value + 'vw'
      })
    },
  }
  
  // 具体应用
  <style lang="less">
    @plugin './plugin.js';
  
    @design-width: 750;
    @per-vw: @design-width / 100;
  
    .text {font-size: px2vw(34, @per-vw);
      color: #457fff;
    }
  </style>

• Sass 中 px2vw() 的定义：

  <style lang="scss">
    $design-width: 750;
    $per-vw: $design-width / 100;
  
    @function px2vw($param) {@return $param / $per-vw + 'px';}
  
    .text {font-size: px2vw(34);
      color: #457fff;
    }
  </style>

  应用 postcss-px-to-viewport 进行验证

  • 文本和原始款式

• postcss-px-to-viewport 配置

• 最终展现成果

等比缩放 — viewport <meta> 标记

所谓 等比缩放 也就是咱们不须要关注 设计稿 px 到底对应多少 设施视口 rem 或 vw，在开发时，间接应用 设计稿提供的数据 px 即可，而后在将整体页面依照 设施视口 / 设计稿 的比例进行 整体缩放。

而缩放就须要应用到 应用 “viewport” <meta> 标记 来管制视口的大小和形态了，例如常见的 <meta> 标记如下：

很显著，咱们只须要管制其中的 width 和 initial-scale 的值即可，它们别离是代表以后设施视口宽度和缩放比的值。

还是用 设计稿 750px 和 设施视口 375px 举例子，因为咱们是间接只用设计稿提供的数据来开发，那么下面的 width = 设施视口宽、initial-scale = 设施视口 / 设计稿。

(function (designWidth) {
  const dEl = document.documentElement;
  let meta = document.querySelector("meta[name=viewport]");

  // 页面中不存在 <meta name="viewport" /> 时，手动创立一个   
  if(!meta) {meta = document.createElement('meta');
    meta.setAttribute('name', 'viewport');
    document.head.appendChild(meta);
  }

  function setMetaContent(){
    const deviceWidth = dEl.clientWidth;
    const scale = deviceWidth / designWidth;

    const content = `width=${deviceWidth}, initial-scale=${scale}`;

    meta.setAttribute("content", content);
  }

  setMetaContent();

  window.addEventListener("resize", setMetaContent)

})(750);

第三方组件库如何做适配？

不晓得你是不是会有一些疑难，比方第三方组件库的适配形式和咱们应用的不统一怎么办？

不必放心，第三方组件库默认都是间接应用 px 的形式来开发的，因而咱们在我的项目中定义的适配形式就是第三方组件库的适配形式，不会产生抵触的。

例如，vant-ui 文档中很贴心的为你列出了 浏览器适配计划（详情可见文档）：

• Viewport 布局

  • Vant 默认应用 px 作为款式单位，如果须要应用 viewport 单位 (vw, vh, vmin, vmax)，举荐应用 postcss-px-to-viewport 进行转换

• Rem 布局适配

  • postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
  • lib-flexible 用于设置 rem 基准值

• 桌面端适配

  • 若须要在桌面端应用 Vant，能够引入 @vant/touch-emulator，这个库会在桌面端主动将 mouse 事件转换成对应的 touch 事件，使得组件可能在桌面端应用

最初

欢送关注同名公众号《熊的猫》，文章会同步更新，也可疾速退出前端交换群！

以上就是挪动端适配的几种形式的原理了，晓得了这些内容之后，其实就不难发现罕用的适配插件不过是帮忙咱们实现了上述的内容和一些细节，例如 主动计算、主动转换、判断机型 等等。

心愿本文对你有所帮忙！！！