Vue2中的移动端适配问题

移动端适配

现在市场上主流的移动端适配方案, 有rem和vw两种. 但是就目前来说, 还是rem用的多

1. rem 是相对于根元素 (html)的 font-size
2. vw和vh是基于显示屏幕的宽高，相当于100等份

但是vw和vh有兼容性问题, 移动端能适配的很好, 但在pc端上对一些老版本的浏览器不支持
但后续发展是会以vw和vh为主的, rem只不过是一个过渡

那么, 有百分比布局, 为什么还要vw跟vh呢?

• 百分比布局: 相对于父级盒子来变化
• vw和vh: 相对于网页视口, 视图

---

1.1 rem适配

rem 适配的本质就是给 html 设置一个 font-size, 那个这个 font-size = 屏幕宽度 / 10
之后想设置一个400px的盒子的话就可以用rem了, 实际尺寸 = 设计稿值 / 基准值

 假设屏幕宽度(设计稿)为375px, 那么给 html 的 font-size = 375 / 10, 为37.5px了
 在其中创建一个 div 盒子为200px, 就是200 / 37.5 = 5.333334rem
 注意 10rem 就是最大值, 当一个盒子宽度超过 10rem 则会出现横向滚动条

//原生可以用这行代码来实现
 document.querySelector('html').style.fontSize = window.innerWidth / 10 + 'px'

插件实现方案:

1. 安装 amfe-flexible插件
   npm i amfe-flexible
2. 在main.js导入
   import “amfe-flexible”
3. 安装postcss-pxtorem
   npm i postcss-pxtorem@5.0.0 -D

配制:来到 项目根目录，也就是跟 package.json 平级的位置，新建一个 postcss.config.js，复制如下配置

module.exports={
    plugins:{
    'postcss-pxtorem': {
        rootValue:37.5, // 基准值
        propList:["*"]  // 匹配的class文件
        }
    }
}

考虑到以后去公司里面, 可能给我们的设计稿是1240px的, 而vant里面的是根据375px来适配的, 这样就很容易冲突
解决方法:

module.exports = ({ file }) => {
  // postcss是干什么的? 它是转换css时使用一些规则, 它是一个文件一个文件转换的
  // 识别是否在转换vant, 转换的路径上一定有node_modules/vant
  // 通过下面这个会打印出路径
  // console.log(e.file)
  // 如果在转换过程中进去了vant里面, 那么就给基准值为37.5, 也就是html的字体大小
  // 如果没有, 也就是我们自己写的css文件, 是不经过vant里面去找的, 所以就给我们给定的值
  const base = file.includes(path.join('node_modules', 'vant')) ? 37.5 : 124
  return {
    plugins: {
      'postcss-pxtorem': {
        rootValue: base, // 基准值
        // 如果ui给我们设计稿是1240px, vant它的设计稿是375px, 那么就要做一个判断了
        // 如果解析的文件识别是vant的ui库就用37.5, 如果不是就设置124
        // 其实就看它是否进去node_modules里面的vant就可以了, 自己写的是不会去那个文件夹里面的
        propList: ['*'] // 哪些css需要转换
      }
    }
  }
}

---

1.2 vw和vh适配

vw和vh是把屏幕分成一百份, 既1vw = 设备宽度/100
在375px的设计稿中, 一个200px的盒子就是 200 / (375 / 100) = 53.34vw

插件实现:

1. 安装插件
   npm i postcss-px-to-viewport -D
2. 配制
   根目录下的postcss.config.js

const path = require('path')
module.exports = ({ file }) => {
  const base= file.dirname.includes(path.join('node_modules','vant')) ? 375 : 1240
  return {
    plugins: {
      'postcss-px-to-viewport': {
        viewportWidth: base // 设计稿宽度
      }
    }
  }
}

和上面同理