vue + rem + less 可视化大屏自适应适配

原创

已于 2022-04-06 14:48:48 修改 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

于 2022-04-06 14:47:45 首次发布

本文介绍如何使用Vue、Rem和Less实现大屏的可视化自适应适配。首先，创建flexible.js文件并引入到main.js中。接着，安装less和less-loader。最后，利用Less的calc、百分比和rem属性进行大屏适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(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(i