vue 中安装插件实现 rem 适配以及 js 常用适配代码

一、vue 中安装插件实现 rem 适配

vue 项目实现页面自适应，可以安装插件实现。

postcss-pxtorem 是 PostCSS 的插件，用于将像素单元生成 rem 单位。

autoprefixer 浏览器前缀处理插件。

amfe-flexible 可伸缩布局方案替代了原先的 lib-flexible 选用了当前众多浏览器兼容的 viewport。

1. 安装插件。

   npm i postcss-pxtorem  
   npm i autoprefixer
   npm i amfe-flexible
   

2. 在根目录新建 postcss.config.js，并根据需要做下面配置。

   module.exports = {
   	plugins: {
   		autoprefixer: {
   			overrideBrowserslist: [
   				"Android 4.1",
   				"iOS 7.1",
   				"Chrome > 31",
   				"ff > 31",
   				"ie >= 8",
   				"last 10 versions" // 所有主流浏览器最近10版本用
   			],
   			grid: true
   		},
   		"postcss-pxtorem": {
   			rootValue: 192, // 设计稿宽度的 1/ 10
   			propList: ["*", "!border"], // 除 border 外所有 px 转 rem
   			selectorBlackList: [".el-"] // 过滤掉.el-开头的class，不进行rem转换
   		}
   	}
   };
   

3. 在 main.js 中引入 amfe-flexible。

   import 'amfe-flexible/index.js';
   

二、js 常用适配代码

(function () {
  const baseSize = 100 // 基准大小
  const designWidth = 3840 // 设计稿的宽度
  const designHeight = 2160 // 设计稿的高度

  function setRem() {
    //  PC端
    let basePc = baseSize / designWidth // 表示3840的设计图,使用100PX的默认值
    let vW = window.innerWidth // 当前窗口的宽度
    let vH = window.innerHeight // 当前窗口的高度
    // 非正常屏幕下的尺寸换算
    let dueH = vW * designHeight / designWidth
    if (vH < dueH) { // 当前屏幕高度小于应有的屏幕高度，就需要根据当前屏幕高度重新计算屏幕宽度
      vW = vH * designWidth / designHeight
    }
    let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
    document.documentElement.style.fontSize = rem + "px"
  }

  // 初始化
  setRem()

  // 改变窗口大小时重新设置 rem
  window.onresize = function () {
    setRem()
  }
})()