pc端px转换为rem针对屏幕分辨率进行页面适配

常用的 pc 端网站适配方案是什么？用的最多的大概就是父元素按照设计图的宽度进行固定宽度，margin:0 auto 居中，两边留白。但是有的设计图不适合这样两边留白的适配方案。

最近接手了一个 pc 端的项目，虽然按照常用的栅格布局 +postcss-pxtorem 插件对 px 转换的方法对页面做了适配，使页面无论在 pc 端打开还是在移动端打开都能自适应，但是在高清分辨率下的页面比如 5k 高清，布局还是有些乱了，这是因为 px 转换成 rem 所依赖的根目录字号没有调整好，于是上网百度了很多方案参考，重新调整了适配方案，但是在移动端打开的时候布局会乱掉，因为 px 的计算是根据 pc 端的宽高来计算的
1. 删掉 html 的
<meta name=”viewport” content=”width=device-width,height=device-height,user-scalable=no” />
删掉这个标签，在移动端打开的时候，布局整体不会乱，但是子元素间距、宽高还是会和设计图有差距

2. 下载依赖：npm install –save-dev postcss-pxtorem
在 vue.config.js 引入依赖:

const pxtorem = require("postcss-pxtorem");//px 转换为 rem 插件
const autoprefixer = require("autoprefixer");// 浏览器前缀处理工具
modules.exports={
css: {
    loaderOptions: {
      postcss: {
        plugins: [
          pxtorem({
            rootValue: 100,
            propList: ["*"]
          }),
          autoprefixer()]
      }
    }
  }
}

3. 我在 src/assets/js 目录下新建 pc.js 文件, 在 main.js 里导入这个文件

//pc.js
// 设计图纸为 1366*798
function pagePc(){
let rootValue = 100;
  let pc = rootValue / 1366; // 表示 1366 的设计图, 使用 100px 的默认值
  let width = window.innerWidth; // 当前窗口的宽度
  let height = window.innerHeight; // 当前窗口的高度
  let rem = "";
  let currentHeight = (width * 798) / 1366;
  if (height < currentHeight) {
    // 当前屏幕高度小于应有的屏幕高度，就需要根据当前屏幕高度重新计算屏幕宽度
    width = (height * 1366) / 798;
  }
  rem = width * pc; // 以默认比例值乘以当前窗口宽度, 得到该宽度下的相应 font-size 值
  document.documentElement.style.fontSize = rem + "px";
 
}