vue实现大屏自适应

Vue项目 专栏收录该内容
4 篇文章 0 订阅
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  mounted() {
    this.setFontSize()
  },
  methods: {
    setFontSize() {
      // 获取整个文档元素
      var docEl = document.documentElement,
      resizeEvt =
        // 获取移动端屏幕是否翻转  
        // 判断windows中是否有这个属性orientationchange 因为orientationchange会遇到兼容性问题,有的浏览器不支持  resize窗体发生改变就会触发这个事件
        'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function() {
        var clientWidth = docEl.clientWidth //clientWidth的实际宽度=width+左右padding
        if (!clientWidth) return
        var size = 100 * (clientWidth / 1920)
        docEl.style.fontSize = (size < 100 ? size : 100) + 'px'
      }
      // 判断addEventListener是否存在,addEventListener的第三个参数true 代表捕获 false是冒泡
      if (!document.addEventListener) return
      window.addEventListener(resizeEvt, recalc, false)
      document.addEventListener('DOMContentLoaded', recalc, false)//DOMContentLoaded可以检测dom是否加载完成
      // console.log('docEl',docEl);
      
    }
  }
}
</script>

用的rem,设计稿宽度除以100

  • 1
    点赞
  • 4
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值