Vue2.0实现自适应分辨率

本文实例为大家分享了Vue2.0实现自适应分辨率的具体代码,供大家参考,具体内容如下

1. 前台框架:Vue2.0+elementUI 2.15.7

2. 开发工具:vs code

3. 安装所需架包:

"postcss-import": "12.0.1",
"postcss-loader": "4.0.1",
"postcss-pxtorem": "^5.1.1",

检查是否安装“flexible”架包,安装了需卸载或者取消引用,该架包文件会和修改过的“flexible”文件冲突。

4. 创建flexibleEx.js文件(该文件是修改flexible架包的flexible.js文件,可以根据需求自行修改),放置在所需要的随意位置,如:“/src/utils”目录下面。

然后将“flexibleEx.js”引入到“main.js”中,如:

import '@/utils/flexibleEx.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) {
    console.warn('将根据已有的meta标签来设置缩放比例')
    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) {
      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
      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) {
    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() {
    const whiteList = [
      '/managementKanban',
      '/productionKanban',
      '/controlBoard',
      '/main'
    ] // 不重定向白名单路由
    var width = docEl.getBoundingClientRect().width
    var rem = 0

    var hrefList = window.location.href.split('/')
    var url = hrefList[hrefList.length - 1]
    var url0 = url.split('?')
    var urlEnd
    if (url0.length > 0) {
      urlEnd = url0[0]
    }
    if (!whiteList.includes('/' + urlEnd)) {
      if (width / dpr <= 1980 && width / dpr > 768) {
        width = 1980 * dpr
        rem = width / 48
      } else if (width / dpr >= 5760) {
        width = 5760 * dpr
        rem = width / 48
      } else {
        width = 540 * dpr
        rem = width / 20
      }
      docEl.style.fontSize = rem + 'px'
      flexible.rem = win.rem = rem
    }
  }

  win.addEventListener(
    'resize',
    function() {
      clearTimeout(tid)
      tid = setTimeout(refreshRem, 300)
    },
    false
  )
  win.addEventListener(
    'DOMNodeInserted',
    function() {
      clearTimeout(tid)
      tid = setTimeout(refreshRem, 50)
    },
    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(e) {
        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'] = {}))

5. 修改“build/utitls.js”文件,添加代码:

function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader] : [cssLoader];

    if (loader) {
      loaders.push({
        loader: loader + "-loader",
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      });
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: "vue-style-loader",
        publicPath: "../../"
      });
    } else {
      return ["vue-style-loader"].concat(loaders);
    }
  }

6. 修改更目录下面“postcssrc.js”

module.exports = {
    plugins: {
        'autoprefixer': {
            overrideBrowserslist: [
                'Android 4.1',
                'iOS 7.1',
                'Chrome > 31',
                'ff > 31',
                'ie >= 8'
            ]
        },
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}

7. 注:界面自适应问题已经解决,但是界面呈现还会出现一些问题,现在需要自行修改异常界面,界面开发尽量使用rem,样式尽量不要使用内联样式,这些都需要手动修改

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue实现PC端分辨率自适应的示例代码

    目录 方案 安装依赖 引入依赖 px转换成rem 修改flexible.js 参考博客 方案 lib-flexible+ px2remLoader lib-flexible:阿里可伸缩布局方案 px2rem-loader:px转rem 安装依赖 npm install px2rem-loader -D npm install lib-flexible -S 引入依赖 main.js引入lib-flexible import 'lib-flexible' px转换成rem vue-loader的o

  • vue实现PC端分辨率适配操作

    依赖 项目基础配置使用 vue-cli 生成 自适应方案核心: 阿里可伸缩布局方案 lib-flexible px转rem:px2rem,它有webpack的loader px2rem 开始 先使用vue脚手架初始化一个webpack项目 vue init webpack 项目名 项目初始化好了之后,进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-loader npm i lib-flexible -S npm i px2rem-loader -D 安装好了之

  • vue3.0 自适应不同分辨率电脑的操作

    首先我们需要要安装一些依赖 npm i lib-flexible-computer -S //根节点会根据页面视口变化而变化font-size大小 npm i px2rem-loader -D//自动将px转换为rem npm i postcss-px2rem//将代码中px自动转化成对应的rem的一个插件 这里要和大家说的就是lib-flexible-computer这个npm装的依赖,想必大家为了做pc的适配搜索了很多方法他们大多数都是安装的下面这个依赖 npm i lib-flexible

  • Vue2.0实现自适应分辨率

    本文实例为大家分享了Vue2.0实现自适应分辨率的具体代码,供大家参考,具体内容如下 1. 前台框架:Vue2.0+elementUI 2.15.7 2. 开发工具:vs code 3. 安装所需架包: "postcss-import": "12.0.1", "postcss-loader": "4.0.1", "postcss-pxtorem": "^5.1.1", 检查是否安装&qu

  • VUE2.0+Element-UI+Echarts封装的组件实例

    本文用Vue2.0+elementUI的panel组件和table组件+echarts的柱状图和折线图实现对结果的展示,实现了表格和图之间的切换和图和表之间的转置. -html <div class="resultDiv"> <div id="panels"> <el-collapse> <el-collapse-item v-for="item in indicators"> <templa

  • PyQt5 实现字体大小自适应分辨率的方法

    最近遇到一个现象,将做好的软件放在更高分辨率的电脑上运行,会导致字体显示不完全,出现被控件遮挡的情况.具体原因可以上网查询,在这里将记录下解决方法. 这里记录两种方法,如果使用的Qt版本在5.6.0之后,可以支持High_DPI,应用设置该属性即可:如果不支持,可以为应用设置自适应字体. if __name__ == "__main__": v_compare = QVersionNumber(5,6,0) v_current,_ = QVersionNumber.fromString

  • Vue2.0 实现移动端图片上传功能

    本文主要介绍VUE2.0图片上传功能的实现.原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件. 效果图如下: 1.DOM代码 1.1input标签 由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none <input @change="fileChange($event)" type="file" id="upload_file" multiple

  • 基于Vue2.0+ElementUI实现表格翻页功能

    Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,它面向企业级的后台应用,能够帮助你快速地搭建网站,极大地减少研发的人力与时间成本.在这个月的 NingJS 上我们开源了这个项目,当时它的文档还没有准备好.今天,经过两周多的完善, Element UI 的文档正式上线啦!目前它处于 rc 阶段,正式版将于 Vue 2.0 发布后第一时间跟进. 欢迎大家来使用和完善,一起把它做成 Vue 最好的企业级组件库. ElementUI的表格要求的数据类型为字典数组.我使用了py

  • Vue2.0 从零开始_环境搭建操作步骤

    简要:继项目空闲后,开始着手vue的学习;为此向大家分享其中的艰辛和搭建办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一.什么是VUE? 是一种node.js框架,特点如下: 1.数据绑定 (特性:双向绑定:一旦发生变化,Dom节点实时更新:PS:尽量抛弃JQ,次特点已经可以解决很多特效等问题) 2.组件化(比如:乐高积木一样通过互相引用而组装起来) 二.开发环境 三.环境搭建 1. 包管理器安装 (1) Homebrew安装 (mac 环境,win无法安装)

  • 解决Vue2.0自带浏览器里无法打开的原因(兼容处理)

    本文介绍了解决Vue2.0自带浏览器里无法打开的原因(兼容处理),分享给大家,希望对大家有帮助 Vue 之 android内嵌H5页面不显示出现这个问题,原因有很多 首先,别急,请看下面的推荐方案: 1.找个Android真机测试下(机型版本为4.4以上),真机联调测试 Android 只需要四个步骤: 1.先保证 是否安装了chrome浏览器 2.其次 ,保证 chrome 是否 已经翻墙成功! 3.最后 使用Android 真机连接 电脑 4.最后的最后,打开chrome ,输入:chrom

  • Vue0.1的过滤代码如何添加到Vue2.0直接使用

    将Vue0.1里的过滤代码添加到Vue2.0,方法很简单,具体内容如下 var filters = { orderBy: orderBy, filterBy: filterBy, limitBy: limitBy, /** * Stringify value. * * @param {Number} indent */ json: { read: function read(value, indent) { return typeof value === 'string' ? value : J

  • vue2.0中vue-cli实现全选、单选计算总价格的实例代码

    由于工作的需要并鉴于网上的vue2.0中vue-cli实现全选.单选方案不合适,自己写了一个简单实用的.就短短的126行代码. <template> <div> <table> <tr> <td><input type="checkbox" v-model="checkAll">全选({{checkedCount}})</td> <td>产品名称</td> &

  • Vue2.0用 watch 观察 prop 变化(不触发)

    本文介绍了Vue2.0用 watch 观察 prop 变化(不触发),分享给大家,具体如下: A 组件: export default { props:{ name:{ type:String } }, data () { return { author: "Jinkey" } }, mounted:function(){ this.author = 'lili' }, watch:{ name:function(){ console.log(this.name); }, author

随机推荐