移动端适配方案

rem适配（等比适配）

核心原理：

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

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

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

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

vw/vh适配

vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高 度 window.innerHeight 等分为 100 份。

如果使用的是 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>

等比缩放--- viewport<meta>标记

在 HTML 的 head 标签里加入 <meta name="viewport" content="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);