项目做PC端页面采用rem适配的使用步骤

环境

win10

vue2.0

vscode

一、rem转换公式

元素rem = 元素px/(设计稿的宽度/划分的份数)=元素px/html的font-size大小；

二、适配原理

将屏幕划分10等份（所以公式中的划分份数就是10），通过设置html根元素的字体大小对页面进行等比缩放；

三、适配步骤

安装：下载解压flexible压缩包；(github.com/amfe/lib-fl…)

配置：

在vue项目的src目录下新建js文件夹，将lib-flexible-2.0文件夹下的index.js复制粘贴进去；

在vue的src目录下的main.js中引入index.js

import "./js/index.js"

修改body样式：在css文件夹下建立全局样式global.css，填入：

body {
  width:10rem;
  max-width:1920px;//屏幕最大尺寸：设计稿的宽度
  min-width:320px;//屏幕最小尺寸
  margin:0 auto;
  line-height:1.5;
  background-color: rgb(32, 33, 54);
}

安装px–>rem插件：

第一款 px to rem：安装配置后选中带有px单位的数值是用Alt+z快捷键一键转换px单位为rem单位

第二款 cssrem：边写代码便转换单位，安装后需要重启vscode

至此，就可以实现rem适配了。页面会随着屏幕的大小等比缩放

---

vue 如何让PC端不同屏幕大小分辨率自适应

前提：因为项目需求是在已有的项目里面增加自适应，不影响其他页面的已有的布局，以下方法仅供参考。

1、安装postcss-px2rem 、px2rem-loader、lib-flexible

npm install postcss-px2rem px2rem-loader --save

npm i lib-flexible --save

2、在根目录src中新建util目录下新建flexible.js等比适配文件

找到node_modules里的lib-flexible包,拷贝一份放在utils里面取名为flexible.js，修改lib-flexible的源码,(更改refreshRem函数)修改为下面的代码就可以了，当然if判断是根据自己需求的调整。

目的：因为lib-flexible的源码是针对移动端的设计方案，我们要实现PC的自适应所以屏幕尺寸也要更换。

  function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    // if (width / dpr > 540) {
    //     width = 540 * dpr;
    // }
    if (width / dpr < 810) {
      width = 810 * dpr;
    }
    if (width / dpr < 1300) {
      width = 1300 * dpr;
    }
    if (width / dpr < 1920) {
      width = 1920 * dpr;
    }
      if (width / dpr < 2560) {
      width = 2560 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + "px";
    flexible.rem = win.rem = rem;
  }

3、在 main.js中引入我们刚修改过的flexible.js文件(因为我们更改了源码 ，所有我们需要引入我们改过的文件)

import "@/utils/flexible";

4、在vue.config.js中配置插件

// // 引入等比适配插件
const px2rem = require("postcss-px2rem");
// 配置基本大小
const postcss = px2rem({
  //配置rem基准值 基准大小 baseSize
  remUnit: 192, // 设计稿尺寸1920/10
});
module.exports = {
 chainWebpack: (config) => {
     config.module
    .rule("css")
    .test(/\.css$/)
    .oneOf("vue")
    .use("px2rem-loader")
    .loader("px2rem-loader")
    .options({
      remUnit: 192,
      remPrecision: 8,
    })
    .end();
 },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [postcss]
      },
    },
  },
}

注意： 1、改完配置记得重新编译项目 2、如果个别地方不想转化px。可以简单的使用大写的PX或 Px。