vue 写移动端做适配

vue移动端项目做适配，现在的手机尺寸有很多种，写移动端的时候就比较麻烦，必须要做适配才行。

今天做适配百度了很多种方法也试了很多种方法，很多坑。今天总结两种方式希望能帮助小伙伴避坑

第一种方案——lib-flexible

-1，安装

npm i -S amfe-flexible

-2，在main.js引入

import 'amfe-flexible'

-3，看具体效果：我们在切换不同设备时，在右边的代码中可以看到html标签的font-size一直在改变。看到这样的效果就说明成功了。

第二种方案——postcss-pxtorem

• 1，安装

npm install postcss-pxtorem -D

• 2，配置
• 配置一：在项目的根目录下创建：postcss.config.js文件，并且添加如下配置：

plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }

rootValue：表示根元素字体大小，它会根据根元素大小进行单位转换。

propList：用来设定可以从 px 转为 rem 的属性，例如 * 就是所有属性都要转换，width 就是仅转换 width 属性，值一般为*。
配置二：browserslist：你会发现在 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
如果你是Vue CLI4.x创建的项目，找到packages.json，并将browserslist字段的配置修改如下：表示咱们的系统向下兼容到安卓4.0版本，IOS8版本。

browserslist:{
	"Android >= 4.0"
	" ios >= 8 "
}

转载自：http://www.10qianwan.com/articledetail/755018.html