vue-移动端屏幕适配

目前，方案有几种。以下的方案亲测有效。

引入淘宝开源的可伸缩布局方案

github开源地址https://github.com/amfe/lib-flexible
淘宝的其实也和viewport的有点像，但是它主要是根据设备设备像素比设置scale的值，保持视口device-width始终等于设备物理像素，屏幕大小动态计算根字体大小，具体是将屏幕划分为10等分。

方案实现步骤

1.安装两个东西

npm install  px2rem-loader --save

npm install amfe-flexible --save

或者使用cnpm安装

cnpm install  px2rem-loader --save

cnpm install amfe-flexible --save

-

2.代码配置
在main.js引入
import 'amfe-flexible/index.js' // rem h5 适配

在build文件夹下的utils.js:文件的方法exports.cssLoaders 中添加：

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
}

并注释代码：

// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

改为：

const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

页面布局

在写页面的时候，<style>模块下的长宽、间距等样式的单位采用rem。

完成。