vue-cli3 + lib-flexible 实现响应式布局 +分辨率宽高缩放锁定布局

1、使用安装 lib-flexible，实现浏览器分辨率网页适配。
lib-flexible，根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸，npm安装：

npm install lib-flexible

2、在src目录下增加一个utils目录，新建一个js文件，名称rem.js，目的是省略rem的计算，加快开发速度。复制以下内容：

// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
    // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

在main.js中引入改js文件：

import "./utils/rem"

这样可以直接用px写模块，而不用去计算rem的值，是不是很舒服呢，重点我采用加粗处理啦。

3、使用安装VW。了解下vw 与 vh单位，以viewport为基准，1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之一

npm i postcss-px-to-viewport -save -dev

我们在项目的package.json中配置如下：

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 32,
        "propList": ["*"]
      }
    },
    "plugins": {
      "autoprefixer": {},
      "postcss-px-to-viewport": {
        "viewportWidth": 1920,
        "minPixelValue": 1
      }
    }
  },

备注：文件 package.json 里面是没有 postcss，不知道加在什么位置，可以参考如下：

4、注释：这个可以加，可以不加，不影响使用
利用 jQuery 实现计算浏览器，大小缩放不改变位置，突出，宽高锁定布局，安装jquery

npm install --save jquery

vue项目模块使用中导入jquery，定义字体

let font
let font2
import jQuery from 'jquery';

在项目的mounted () 方法里面复制如下：

 mounted () {
    ; (function (win, doc) {
      function change () {
        var width = window.screen.availWidth
        var maxH = window.screen.availHeight
        doc.documentElement.style.fontSize = (62.5 * width) / 1200 + 'px'
        jQuery('.body_login').width(width)
        font = ((62.5 * width) / 1200) * 0.12
        font2 = ((62.5 * width) / 1200) * 0.16
        // 必须在 body 有宽度后执行，否则ie有问题
        var height = window.innerHeight || document.body.clientHeight
        var h
        if (height > maxH - 130) {
          h = height
        } else {
          h = maxH - 130
        }
        jQuery('.body_login').css('minHeight', h)
        // 必须在 body 有宽度后执行，否则ie有问题
      }
      change()
      win.addEventListener('resize', change, false)
    })(window, document)
  },
};

备注：如果浏览器切换分辨率，引用的图片缩放不发生改变，可以设置类名，定义图片本身的宽，高，就可以了

有时间就写一下，希望对您有帮助，有更好的建议或更改，可以留言哦，谢谢！

如果想学全栈开发，从写接口到，前端实现调接口，一整套流程，可以进群获取视频资料学习！

Java全栈交流①群要是满了可以加2群 1135453115， ②群 821596752