在vue项目中实现网页整体随屏幕尺寸缩放

最新推荐文章于 2024-04-26 16:48:13 发布

叽里~咕噜

最新推荐文章于 2024-04-26 16:48:13 发布

阅读量1.9k

点赞数 1

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/chenghao1111/article/details/122221504

版权

在Vue2项目中，由于pc端未采用响应式设计，使用lodash插件实现了移动端屏幕自适应。通过npm安装lodash，然后在App.vue主框架中引入，并给容器添加ref属性。在mounted阶段应用自适应方法，定义了1080x1920的画布尺寸。

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

此处的项目为vue2版本，因为pc端的项目没有采用响应式自适应手机端的设计，所以使用lodash插件实现屏幕移动端自适应。

首先下载lodash插件。
npm i lodash -S

然后在App.vue中导入，此处的App.vue主要指的是主框架，因不同项目可自行选择。
import _ from 'lodash'

然后给app容器挂上ref=“app”

<template>
  <a-config-provider :locale="locale">
    <div id="app" ref="app">
      <router-view />
    </div>
  </a-config-provider>
</template>

然后在mounted使用如下方法（其中的1080以及1920为定义的画布尺寸）：

mounted () {
    this.$nextTick(() => {
      const $app = this.$refs.app
      const standardScale = 1080 / 1920

      window.addEventListener(
        'resize',
        _.debounce(function () {
          const docHeight = document.body.clientHeight
          const docWidth = document.body.clientWidth

          if (docWidth < 1680) {
            const curre