PC端 VUE 官网项目 前端开发 响应式布局（宽+高 等比例缩放）_vue项目pc端同比例放大缩小

背景

最近开发了3个门户网站，一般程序员都会有显示器，一开始我使用的是flex响应式 + 宽度百分比去进行适配，但是开发完之后发现在显示器上看着正常，但是到了笔记本上就发现宽度是自适应了，但是高度并没有随着宽度去等比例缩小，就显得页面很别扭，所以我就查了很多文章，一个一个去试，下面来总结一下，方便以后去开发：

方案

• lib-flexible + px2remLoader + postcss-px2rem
• lib-flexible：阿里可伸缩布局方案
• px2rem-loader：px转rem
• autofit.js : 是一个可以让你的PC项目自适应屏幕的工具

安装依赖

npm install postcss-px2rem px2rem-loader --save
npm i lib-flexible --save
1
2

1、vue-cli2 项目

引入依赖：

• main.js引入lib-flexible

import 'lib-flexible'
1

px转换成rem

vue-loader的options和其他样式文件loader最终是都是由build/utils.js里的方法生成的，我们只需在cssLoader后再加上一个px2remLoader即可，px2rem-loader的remUnit选项意思是 1rem=多少像素，结合lib-flexible的方案，我们将px2remLoader的options.remUnit设置成设计稿宽度的1/10，这里假设设计稿宽为1920px

• build/utils.js中添加px2remLoader

//utils.js
const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // 增加代码，px转rem配置（需要将px2remloader添加进loaders数组中）
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192,  //根据视觉稿，rem为px的十分之一，1920px  192 rem
      // remPrecision: 8//换算的rem保留几位小数点
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 放进loaders数组中

// //utils.js
function generateLoaders (loader, loaderOptions) {
   const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

   if (loader) {
     loaders.push({
       loader: loader + '-loader',
       options: Object.assign({}, loaderOptions, {
         sourceMap: options.sourceMap
       })
     })
   }
   //...
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
'
运行
运行

• 修改flexible.js

function refreshRem(){
   var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        width = width * dpr;
    }
    //缩放比例，可按实际情况修改
    var rem = width / 8;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
1
2
3
4
5
6
7
8
9
10
'
运行
运行

2、vue-cli3 项目

• 在根目录src中新建util目录下新建rem.js等比适配文件
  找到node_modules里的lib-flexible包,拷贝一份放在utils里面取名为flexible.js，修改lib-flexible的源码,(更改refreshRem函数)修改为下面的代码就可以了，当然if判断是根据自己需求的调整。
  目的：因为lib-flexible的源码是针对移动端的设计方案，我们要实现PC的自适应所以屏幕尺寸也要更换。

// 更改refreshRem函数
function refreshRem(){
   var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        width = width * dpr;
    }
    //缩放比例，可按实际情况修改
    var rem = width / 8;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
1
2
3
4
5
6
7
8
9
10
11
'
运行
运行

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

import "@/utils/flexible";
1

• 在vue.config.js中配置插件

// // 引入等比适配插件
const px2rem = require("postcss-px2rem");
// 配置基本大小
const postcss = px2rem({
  //配置rem基准值 基准大小 baseSize，需要和rem.js中相同
  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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

3、备用方案

由于我开发的时候第一次没有发现cli2 和 cli3 的区别 ，是修改flexible文件的时候才发现的（自己项目是cli3），所以会有两个步骤结合的情况，后来因为项目着急也没有去删除一些没用的去验证哪个需要哪个不需要，所以后来我就又找了找，看有没有准确的，发现很多文章都是乱的，凭自己的判断在这里提供一个看上去可行的（cli3）：

1. 安装 postcss-px2rem及px2rem-loader

npm install postcss-px2rem px2rem-loader --save
1

2. 在根目录src中新建utils目录下新建rem.js等比适配文件

 
// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
  // 当前页面屏幕分辨率相对于 1920宽的缩放比例，可根据自己需要修改
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3. 在main.js中引入适配文件

import './utils/rem.js'
1

4. 到vue.config.js中配置插件

 
// 引入等比适配插件
const px2rem = require('postcss-px2rem')
 
// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 16
})
 
// 使用等比适配插件
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

注意事项

1、配置这些之后需要重新编译项目
2、如果个别地方不想转化px，可以简单的使用大写的PX或 Px，或者在其后添加/*no*/保证不被转换
3、这种响应式配置法对于行内样式是无用的

4、autofit.js

autofit.js是一个可以让你的PC项目自适应屏幕的工具，其原理非常简单，即在scale等比缩放的基础上，向右或向下增加了宽度或高度，以达到充满全屏的效果，使用autofit.js不会挤压、拉伸元素，它只是单纯的设置了容器的宽高。
代码仓库

大厂开发的框架（参考）

Admin Pro
Antdv Pro
Antdv Pro源码
vue-admin-beautiful-pro 源码地址

总结：

各位大佬有好方法或者想指正的可以在评论去告诉我们，大佬们辛苦了（抱大腿）！！！

补充

最近逛技术博有看到一些文章也不错，贴出来供大家看看：

• 关于根据设计稿制作网页时的屏幕适配、缩放操作适配问题（跳转至14）