Vue项目中通过插件pxtorem实现大屏响应式

一、原理

rem单位代表的是根节点的font-size大小，所以当我们在页面上使用rem去替代px的时候，就可以通过修改根节点font-size的值，动态地让页面上的元素根据不同浏览器宽高下去实现变化。

二、工具

1.postcss-pxtorem

作用：在编译打包代码的时候，帮助我们把页面上的px单位转化为rem单位。因为设计图一般是给一个固定的尺寸，所有元素都统一以px为单位提供，所以一般情况下我们为了尽可能还原设计图，都一一对应地按同样的数值去实现页面，最后为了高效率自动化地将对应的px都转化为rem，所以我们必须使用这款插件。

依赖：使用该插件所需要的几个依赖。

2.flexible.js
作用：根据浏览器的可视窗口大小，动态地去设置根节点font-size的值，也就是rem的基准值。实现各元素根据不同屏幕大小与设计图的宽高比例进行动态地放大缩小。

(function (win, lib) {
   
  var doc = win.document
  var docEl = doc.documentElement
  var metaEl = doc.querySelector('meta[name="viewport"]')
  var flexibleEl = doc.querySelector('meta[name="flexible"]')
  var dpr = 0
  var scale = 0
  var tid
  var flexible = lib.flexible || (lib.flexible = {
   })

  if (metaEl) {
   
    console.warn('将根据已有的meta标签来设置缩放比例')
    var match = metaEl
      .getAttribute('content')
      // eslint-disable-next-line no-useless-escape
      .match(/initial\-scale=([\d\.]+)/)
    if (match) {
   
      scale = parseFloat(match[1])
      dpr = parseInt(1 / scale)
    }
  } else if (flexibleEl) {
   
    var content = flexibleEl.getAttribute('content')
    if (content) {
   
      // eslint-disable-next-line no-useless-escape
      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
      // eslint-disable-next-line no-useless-escape
      var maximumDpr