vue移动端适配解决方案

手淘适配解决方案

阿里巴巴淘宝团队出品的amfe-flexible是一个用于解决移动端不同机型适配的包。在其源码中，通过不同屏幕的像素比来设置scale值，保证当前窗口的device-width始终等于物理像素设备的宽度。从而达到不同机型的适配效果。

当然，要达到完全适配，我们不仅仅只用到amfe-flexible还需要用到postcss-pxtorem。postcss-pxtorem是将我们在css中写的px单位转换为rem单位。与其相似的包还有postcss-pxtorem该包则是将px转换成了2倍的rem单位。

下面我们进行依赖的安装

npm i amfe-flexible postcss-pxtorem --save-dev

安装完成后我们需要进行postcss插件相关的配置在根目录新建一个名为postcss-config.js的文件，如果项目中已包含改文件则无需新建。在文件中写入如下代码：

module.exports = {
	plugins: {
		'postcss-pxtorem': {
			rootValue: 37.5,
			propList: ['*','!border']
		}
	}
}

上面代码是在postcss中配置一个有关postcss-pxtorem的插件，其中rootValue的值表示要转换的倍数。当H5设计稿的width为375时，对应的rem就等于375/37.5 = 10rem当项目加载时。postcss会将插件postcss-pxtorem进行加载。postcss-px则负责将style中所有用px标记的样式转换成rem类型。propList这个配置则表示要将那些css样式进行匹配转换。其中*表示匹配所有的css !表示不需要匹配的

下面是postcss-pxtorem 其他的一些配置项

{ 
 //rootValue(Number | Function) 表示根元素字体大小或根据参数返回根元素字体大小
   rootValue : 16,
   //类型为数字 允许 REM 单位增长到的十进制数字。
   unitPrecision : 5,
   //类型为数组 可以从 px 更改为 rem 的属性。
   propList : [ 'font' ,  'font-size' ,  'line-height' ,  
   'letter-spacing' ], 
   //类型为数组 要忽略并保留为 px 的选择器 可以为正则表达式
   selectorBlackList : [ ],
   //类型为布尔值 替换包含 rems 的规则，而不是添加回退。
   replace : true,
   //类型为布尔值 允许在媒体查询中转换 px。
   mediaQuery : false,
   //类型为数字 设置要替换的最小像素值。
   minPixelValue : 0,
   //类型为字符串或正则表达式或函数 要忽略并保留为 px 的文件路径。
  exclude：/ node_modules / i 
}

值得注意的是： postcss-pxtorem 可能会将UI组件库也进行转换，若出现该问题，我们应该忽略掉vant相关的css

在main.js引入相关的包
之前我们安装了vant组件库和一些辅助的工具包 我们应该在main.js中引入

import 'amfe-flexible'
import Vue from 'vue'
//按需引入vant的一些组建
import {Toast,Dialog,Overlay} from 'vant'
import FastClick from 'fastClick'
FastClick.attach(document.body)
import Vconsole form 'vconsole'
if(process.env.NODE_ENV === 'development'){
  const vConsole = new Vconsole({
  defaultPlugin: ['system','network','element'],
  maxLogNumber:'1024',
  onReady:()=> console.log('i am fine')
  })
}
Vue.use(Toast).use(Dialog).use(Overlay).use(Vconsole)

至此，我能的移动端适配就做好了，只需安装设计稿的比例进行开发就可以了