移动端适配3：企业级移动端适配3种方案实操

2022年01月24日 11:39 · 阅读 1807

这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。

1. 开端

对于前两节像素，和实现方案的理解，我们总结了px+rem,px+vw,rem+vw三种模式的互相转换的方案，这一节我准备结合这三种如何转换和项目实操进行结合。

首先我们要明白一点，设计图始终是有一个以固定px为设计图（750xauto）,或者有些设计师是以(375xauto)这种直接二倍图就可以了。然后将px转换为rem适配或者vw适配。

2. px+vw

这是网上推荐的比较多的方式

1.创建vue项目

npm i @vue/cli -g
vue create px-vw
复制代码

2.安装 postcss-px-to-viewport 这个插件很方便的将px转换成vw

    npm i postcss-px-to-viewport --save-dev
复制代码

3.配置postcss-px-to-viewport插件进行配置文件.postcssrc.js

module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 4, // 转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: [""], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false, // 是否处理横屏情况
    },
  },
};

复制代码

4.在app.vue书写简单适配环境

<template>
  <div class="app">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
  </div>
</template>

<script>
export default {};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.app {
  width: 750px;
  height: 1000px;
  background: red;
}
.header {
  width: 400px;
  height: 200px;
  background: black;
}

.content {
  width: 300px;
  height: 200px;
  background: yellow;
}

.footer {
  width: 200px;
  height: 200px;
  background: gray;
}
</style>

复制代码

375 x auto 540 x auto

5.总结这种模式实现起来非常简单

3. px+rem

对于rem我们知道是相对于根节点的多少倍数，那么我们只需要在根节点设置font-size为真实设备宽度的逻辑像素px,然后所有内容相对于根节点写多少倍rem即可

1.根据屏幕换算根节点的font-size

定义375 x auto的屏幕为font-size:14px

那么

width为屏幕宽度 fontSize = 14 * (width / 375) + "px";

2.根据屏幕变化更改响应式根节点计算

// 基准大小
const baseSize = 28;
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const proportion = document.documentElement.clientWidth / 750;
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = baseSize * proportion + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem();
};

复制代码

3.px-rem

经过步骤2的操作，我们设置了准确的根节点font-size,那么接下来进行的操作

经过步骤3的操作，我们自动设置了根节点的值，然后页面可以使用rem来书写代码，但是设计图都是750px的格式，里面所有量出来的尺寸都需要自己计算后写成rem，这显然是不行的，那么我们还需要将28px按比例转成1rem,我们设置的基准是750尺寸，28px（也就是真实逻辑分辨率375，14px）

4.安装postcss-pxtorem

    npm install postcss-pxtorem -D
复制代码

5.配置.postcssrc.js

具体参数意思可以参考上面说到的px+pw适配方式里面有讲解

module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等

    "postcss-pxtorem": {
      rootValue: 28,
      propList: ["*"],
    },
  },
};

复制代码

总结：这时候已经转换成功了，px按比例转成rem,rem根节点安设配逻辑像素转成px

4.rem+vw

这种模式主要是解决兼容性问题，方案一直接转换成vw可能导致兼容性问题，这个时候我们需要做一个补丁，相当于设置了vw之前也加一层font-size具体px的设置，具体如何计算参考我的上一篇文章所提到的。

html {
    font-size: 13.33333vw;
}

@media screen and (max-width: 300px) {
  html {
    font-size: 40px;//根据真实屏幕逻辑像素所计算出来的
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 300px) and (max-width: 400px) {
  html {
    font-size: 53.32px;//根据真实屏幕逻辑像素所计算出来的
    font-size: 13.33333vw;
  }
}
   
复制代码

这样根rem计算成功了，然后就是方案二一致的px转成rem就行了，这种方案我这边认为是比较完美的。