rem 适配 移动端自适应

主要介绍了vue移动端自适应，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习 价值，需要的朋友们一起来学习学习吧

方案一:直接引入js （自己 写的动态改变fontsize的js）

function htRem () {
  var ww = document.documentElement.clientWidth;
  if (ww > 750) {
    ww = 750;
  }
  document.documentElement.style.fontSize = ww / 7.5 + "px";
}
htRem();
window.onresize = function () {
  htRem();
};

在main.js中import引入即可

方案二:使用插件

1. 安装依赖

cnpm install lib-flexible postcss-pxtorem --save-dev
//或

npm install lib-flexible --save
npm install postcss postcss-pxtorem --save-dev

2. main.js导入

// 移动端适配
 import ‘lib-flexible/flexible’; 

3. 创建.postcssrc.js并配置

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },//这样当遇到vant组件，rootValue值为37.5，而其他我们自己的样式文件rootValue值为75
      propList: ['*']
    }
  }
}

4. 按照上面的步骤写完后，使用时设计图750px的，那设计图要是300px的宽度，那代码里面写成300px。这样就可以了
5. postcss-pxtorem切换版本
   当进行项目启动，会发现报错，查了原因可能是版本不匹配。
   所以切换postcss-pxtorem的版本

npm i postcss-pxtorem@5.1.1 --save-dev

注意

1. 不使用行内样式
   对于行内样式，阿里手淘并不能将px转rem，所以对于需要自适应的样式，如font-size、width、height等请不要写在行内。同理，对于不需要转化的样式可以写在行内，或者使用PX（大写）作为单位。

2. 字号不使用rem
   我们都知道chrome的最小显示的字体是12px，如果字体用rem，计算出来小于12px，那么就也会以12px显示，而且我们不希望出现13px或者15px这样的奇葩尺寸，所以字体最好是用PX（大写）来表示，至于适应，我们可以写媒体查询

.item {
      border-bottom: 1PX #8d8d8d dashed;
      font-size: 12PX;
      line-height: 16PX;
      @media screen and (min-width: 576PX) {
        font-size: 14PX;
        line-height: 18PX;
      }
	  @media screen and (min-width: 768PX) {
        font-size: 16PX;
        line-height: 28PX;
      }
      @media screen and (min-width: 992PX) {
        font-size: 16PX;
        line-height: 32PX;
      }
      @media screen and (min-width: 1200PX) {
        font-size: 18PX;
        line-height: 64PX;
      }   
} 

vm适配

1. 安装依赖

npm install postcss-px-to-viewport -D

2. 在根目录下新建 .postcssrc.js 文件

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    }
  }
}

3. 保存文件后我们重启项目即可
   当然啦，前面的都是建立在没有进行rem的适配，如果你的项目进行了rem 的适配我们需要在做如下操作：
   main.js 文件中删除如下代码

import "lib-flexible/flexible";

package.json 文件中删除如下代码

"lib-flexible": "^0.3.2",
"postcss-plugin-px2rem": "^0.8.1",

重启项目