可视化大屏项目适配 vue（方案一）

选择的适配方案
设计稿是1920px
flexible.js 把屏幕分为 10 等份 ( flexible.js 中可修改 ，默认为 10 )

1. 新建 vue 项目，项目目录如下

   
   
   
2. src / assets 文件下创建一个新的文件夹 css， css 文件夹下新建一个base.css文件用于定义全局样式

html,body,#app {    padding: 0;    margin: 0;    height: 100%;    min-width: 1024px;}body,div,span,header,footer,nav,section,aside,article,ul,ol,dl,dt,dd,li,a,p,h1,h2,h3,h4,h5,h6,i,b,textarea,button,input,select,figure,figcaption {    padding: 0;    margin: 0;    list-style: none;    font-style: normal;    text-decoration: none;    border: none;    /*color: #333;*/    font-weight: normal;    box-sizing: border-box;    -webkit-tap-highlight-color: transparent;    -webkit-font-smoothing: antialiased;}

2. src 目录下新建一个 utils 文件夹，新建 flexible.js 文件，添加以下代码

(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) {    // eslint-disable-next-line no-useless-escape    var match = metaEl.getAttribute('content').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 = content.match(/maximum\-dpr=([\d\.]+)/)      if (initialDpr) {        dpr = parseFloat(initialDpr[1])        scale = parseFloat((1 / dpr).toFixed(2))      }      if (maximumDpr) {        dpr = parseFloat(maximumDpr[1])        scale = parseFloat((1 / dpr).toFixed(2))      }    }  }  if (!dpr && !scale) {    // eslint-disable-next-line no-unused-vars    var isAndroid = win.navigator.appVersion.match(/android/gi)    var isIPhone = win.navigator.appVersion.match(/iphone/gi)    var devicePixelRatio = win.devicePixelRatio    if (isIPhone) {      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {        dpr = 3      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {        dpr = 2      } else {        dpr = 1      }    } else {      // 其他设备下，仍旧使用1倍的方案      dpr = 1    }    scale = 1 / dpr  }  docEl.setAttribute('data-dpr', dpr)  if (!metaEl) {    metaEl = doc.createElement('meta')    metaEl.setAttribute('name', 'viewport')    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')    if (docEl.firstElementChild) {      docEl.firstElementChild.appendChild(metaEl)    } else {      var wrap = doc.createElement('div')      wrap.appendChild(metaEl)      doc.write(wrap.innerHTML)    }  }  function refreshRem() {    var width = docEl.getBoundingClientRect().width    var rem = width / 10 // 适配宽度为 1920px， 分为10份 ，则 vue.config.js 中 postcss 值为 1920/10    docEl.style.fontSize = rem + 'px'    flexible.rem = win.rem = rem  }  win.addEventListener('resize', function() {    clearTimeout(tid)    tid = setTimeout(refreshRem, 300)  }, false)  win.addEventListener('pageshow', function(e) {    if (e.persisted) {      clearTimeout(tid)      tid = setTimeout(refreshRem, 300)    }  }, false)  if (doc.readyState === 'complete') {    doc.body.style.fontSize = 12 * dpr + 'px'  } else {    doc.addEventListener('DOMContentLoaded', function() {      doc.body.style.fontSize = 12 * dpr + 'px'    }, false)  }  refreshRem()  flexible.dpr = win.dpr = dpr  flexible.refreshRem = refreshRem  flexible.rem2px = function(d) {    var val = parseFloat(d) * this.rem    if (typeof d === 'string' && d.match(/rem$/)) {      val += 'px'    }    return val  }  flexible.px2rem = function(d) {    var val = parseFloat(d) / this.rem    if (typeof d === 'string' && d.match(/px$/)) {      val += 'rem'    }    return val  }})(window, window.lib || (window.lib = {}))

3. 在 main.js 中引入该 flexible.js 文件 和 全局样式文件 base.css

import Vue from 'vue'import App from './App.vue'import router from './router'// 引入适配方案import './utils/flexible'// 引入全局样式import './assets/css/base.css'Vue.config.productionTip = falsenew Vue({  router,  render: h => h(App)}).$mount('#app')

4. 安装等比适配插件，二选一即可
   4-1(推荐）. 安装 等比适配插件 postcss-px2rem 及 px2rem-loader

npm install postcss-px2rem px2rem-loader --save

在根目录下，新建一个 vue.config.js 文件，设置

// 引入等比适配插件const px2rem = require('postcss-px2rem')// 配置基本大小const postcss = px2rem({  // 基准大小 baseSize，需要和 flexible.js中相同  remUnit: 192 // 适配宽度为 1920px， 分为10份 ，值为 1920/10})// 使用等比适配插件module.exports = {  lintOnSave: true,  css: {    loaderOptions: {      postcss: {        plugins: [          postcss        ]      }    }  }}

4-2.（不推荐） vscode 安装 cssrem 插件 （自动将px 换算为rem）