vue2.x 移动端适配

什么是rem
rem是基于html的font-size的倍数，那么我们只需要在不同的设备上设定具有相同比例的font-size即可。
那么相同的rem值在不同的设备的上的比例是一致的。

一般而言，lib-flexible并不独立出现，而是搭配px2rem-loader一起做适配方案，目的是自动将css中的px转换成rem。以下为它在vue中的使用。
1、安装 lib-flexible

npm install lib-flexible --save-dev

2 在main.js中引入 lib-flexible

// px2rem 自适应
import 'lib-flexible'

3、安装 px2rem-loader

npm install px2rem-loader --save-dev
npm install postcss-px2rem --save-dev

4 配置 px2rem-loader
在项目根目录文件vue.config.js，然后如下配置：

module.exports = {
    lintOnSave: false,
    chainWebpack: config => {
      config.module
      .rule('css')
       .test(/\.css$/)
       .oneOf('vue')
       .resourceQuery(/\?vue/)
       .use('px2rem')
       .loader('px2rem-loader')
       .options({
        remUnit: 75
       })
    }
};

5scoped作用
<style lang="less" scoped> style里面+scoped表示样式只在本组件起作用，不影响全局作用

6vue移动端适配
设置这段的目的是设置视口宽度，不允许用户缩放

 <!-- width: 设置布局视口的宽度  device-width是获取用户设备的宽度 -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

7要求UI设计稿是375px或者它的的倍数
如果是375px则 添加扩展 cssrem,并在设置中设置 cssrem:root font size 为 37.5
如果是750px则 添加扩展 cssrem,并在设置中设置 cssrem:root font size 为 75

8 安装 less-loader插件

npm install less less-loader --save-dev

9为了使洁面适配大屏，需要在 app.vue里面设置

  max-width: 420px; /* 设置最大宽度 */
  margin: 0 auto;   /* 居中显示 */
  height: 100vh; /* 设置容器高度为视口高度 */
}