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

宋芳芳

已于 2022-04-06 14:48:48 修改

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签： vue 前端

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

本文链接：https://blog.csdn.net/fang0321/article/details/123989674

版权

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

摘要由CSDN通过智能技术生成

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