vue移动端适配方案

使用rem适配

技术方案1

1. 把所有px单位改成rem ， 用postcss-pxtorem 来实现，它是一款 postcss 插件，用于将px自动转化为 rem。
2. 根据不同的手机屏幕的宽度，来动态设置rem的参考值：html标签上的font-size的大小。用lib-flexible 来实现，用于设置 rem 基准值
3. 它对应的包名不是这个名字，而是amfe-flexible
4. 它需要是生产依赖
   安装插件

# 后处理器 开发阶段使用
# 作用：把px单位自动转成rem单位
yarn add postcss postcss-pxtorem@5.1.1 -D

# 修改rem基准值的js插件   需要在打包后需要使用
# 作用: 根据设置屏幕的宽度去调整rem的值（html标签上font-size的大小）
#      它的默认计算方式是屏幕宽度的1/10，默认值是37.5
yarn add amfe-flexible

设置postcss
根目录下创建postcss.config.js文件，内容如下：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 能够把所有元素的px单位转成Rem
      // rootValue: 转换px的基准值。
      // 例如一个元素宽是75px，则换成rem之后就是2rem。
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

最后在入口文件引入插件即可

 import 'amfe-flexible'

技术方案2

在main.js里面加入如下代码

new Vue({
  router,
  store,
  render: h => h(App),
  // 移动端适配
  methods: {
    setRem (doc, win) {
      var docEl = doc.documentElement
      var resizeEvt =
                    'orientationchange' in window ? 'orientationchange' : 'resize'
      var recalc = function () {
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        if (clientWidth >= 375) {
          docEl.style.fontSize = 100 * (clientWidth / 375) + 'px'
        } else {
          docEl.style.fontSize = 100 * (clientWidth / 375) + 'px'
        }
      }

      if (!doc.addEventListener) return
      win.addEventListener(resizeEvt, recalc, false)
      doc.addEventListener('DOMContentLoaded', recalc, false)
    }
  },
  mounted () {
    // 设置rem大小
    this.setRem(document, window)
  }
}).$mount('#app')

(function () {
	var calc = function () {
		var rem = document.documentElement.clientWidth / 10;
		document.documentElement.style.fontSize = rem + 'px';
		rem = document.documentElement.clientWidth > 640 ? 37.5 : rem;
		console.log(rem);
	}
	calc();
	window.addEventListener('resize', calc);
})();

2022年3/23 更新

1. 安装 postcss-px-to-viewport
2. `yarn add --dev postcss-px-to-viewport
3. 在项目根目录下创建 postcss.config.js 文件

module.exports = {
    plugins: {
        'postcss-px-to-viewport': {
            unitToConvert: 'px', // 需要转换的单位，默认为"px"
            viewportWidth: 750, // 设计稿的视口宽度
            exclude: [/node_modules/], // 解决vant375,设计稿750问题。忽略某些文件夹下的文件或特定文件
            unitPrecision: 5, // 单位转换后保留的精度
            propList: ['*'], // 能转化为vw的属性列表
            viewportUnit: 'vw', // 希望使用的视口单位
            fontViewportUnit: 'vw', // 字体使用的视口单位
            selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
            minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
            mediaQuery: false, // 媒体查询里的单位是否需要转换单位
            replace: true, //  是否直接更换属性值，而不添加备用属性
            landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
            landscapeUnit: 'vw', // 横屏时使用的单位
            landscapeWidth: 1125 // 横屏时使用的视口宽度
        }
    }
}