Vue項目如何改變屏幕尺寸重新刷新頁面-計算頁面尺寸

更新時間：2022年09月15日 15:49:12 作者：JackieDYH

這篇文章主要介紹了Vue項目如何改變屏幕尺寸重新刷新頁面-計算頁面尺寸，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

改變屏幕尺寸重新刷新頁面-計算頁面尺寸

效果

在app.vue中設(shè)置

方式一

<template>
  <div id="app">
      <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    //窗口尺寸改變
    window.onresize = () => {
      return (() => {
        // this.$forceUpdate();//強制更新數(shù)據(jù)
        this.$router.go(0);
      })();
    };
  },
  methods: {},
  destroyed() {
    // 銷毀
    window.onresize = null;
  },
};
</script>

多次使用window.onresize，會造成其他的失效

方式二

<template>
  <div id="app">
      <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    //窗口尺寸改變
    window.addEventListener("resize", () => this.Refresh());
  },
  methods: {
	Refresh() {
      this.$router.go(0);
    },
  },
  destroyed() {
    // 銷毀
    window.removeEventListener("resize", this.Refresh());
  },
};
</script>

尺寸的自適應(yīng) 大屏自適應(yīng)

我在一些大屏的項目中，碰見自己電腦寫好的樣式，但是在大屏中出現(xiàn)了變形。

通過 postcss-px2rem 插件，實現(xiàn)項目的自適應(yīng)

使用：

** 1、安裝包**

npm install postcss-px2rem px2rem-loader --save

2、文件創(chuàng)建

在src目錄下創(chuàng)建一個util的工具文件夾，然后創(chuàng)建一個js文件，這里我叫pxtorem.js，文件中寫上一下代碼

// rem等比適配配置文件
// 基準(zhǔn)大小
const baseSize = 16
// 設(shè)置 rem 函數(shù)
function setRem () {
  // 當(dāng)前頁面寬度相對于 1920寬的縮放比例，可根據(jù)自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 設(shè)置頁面根節(jié)點字體大?。ā癕ath.min(scale, 2)” 指最高放大比例為2，可根據(jù)實際業(yè)務(wù)需求調(diào)整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設(shè)置 rem
window.onresize = function () {
  setRem()
}

3、在main.js文件中引入剛剛創(chuàng)建好的文件

import './util/pxtorem'

4、在vue.config.js文件中配置

如果項目中沒有這個文件，可以自己手動在根目錄下創(chuàng)建一下

// 引入等比適配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
? // 基準(zhǔn)大小 baseSize，需要和rem.js中相同
? remUnit: 16
})
// 使用等比適配插件
module.exports = {
? lintOnSave: true,
? css: {
? ? loaderOptions: {
? ? ? postcss: {
? ? ? ? plugins: [
? ? ? ? ? postcss
? ? ? ? ]
? ? ? }
? ? }
? }
}

通過transform，可用于echarts的項目中

ps：echart中的適應(yīng)，你也可以用echarts自帶的resize，然后對內(nèi)部的文字字體大小設(shè)置一個值，進行變化

<template>
  <div id="app">
    <div ref="newCatalog" class="newCatalog">
      <router-view />
    </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      scale: ''
    }
  },
  mounted() {
    this.setScale()
    window.addEventListener('resize', this.setScale)
  },
  methods: {
    getScale() {
      const width = window.screen.width
      const height = window.screen.height
      let ww = window.innerWidth / 1920
      let wh = window.innerHeight / 1080
      return ww < wh ? ww : wh
    },
    setScale() {
      this.scale = this.getScale()
      this.$refs.newCatalog.style.setProperty('--scale', this.scale)
    }
  }
}
</script>
<style lang="scss">
@import '~style/init.scss';
#app {
  width: 100vw;
  height: 100vh;
  font-family: Alibaba-PuHuiTi-R, Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  background: url('~assets/images/bg.png');
  background-size: cover;
}
.newCatalog {
  --scale: 1;
  width: 1920px;
  height: 1080px;
  background-size: 100% 100%;
  position: absolute;
  transform: scale(var(--scale)) translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
  left: 50%;
  top: 50%;
}
</style>

通過 postcss-px-to-viewport 插件，實現(xiàn)項目的自適應(yīng)

文檔

和vue.config.js 文件同級，建一個 postcss.config.js 的文件

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 需要轉(zhuǎn)換的單位，默認為"px"
      viewportWidth: 1920, // 設(shè)計稿的視口寬度
      unitPrecision: 5, // 單位轉(zhuǎn)換后保留的精度
      propList: ['*'], // 能轉(zhuǎn)化為vw的屬性列表
      viewportUnit: 'vw', // 希望使用的視口單位
      fontViewportUnit: 'vw', // 字體使用的視口單位
      selectorBlackList: [], // 需要忽略的CSS選擇器，不會轉(zhuǎn)為視口單位，使用原有的px等單位。
      minPixelValue: 1, // 設(shè)置最小的轉(zhuǎn)換數(shù)值，如果為1的話，只有大于1的值會被轉(zhuǎn)換
      mediaQuery: false, // 媒體查詢里的單位是否需要轉(zhuǎn)換單位
      replace: true, //  是否直接更換屬性值，而不添加備用屬性
      exclude: [/node_modules/, /LargeScreen/], // 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件,數(shù)組中寫正則
      include: undefined, // 如果設(shè)置了include，那將只有匹配到的文件才會被轉(zhuǎn)換
      landscape: false, // 是否添加根據(jù) landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
      landscapeUnit: 'vw', // 橫屏?xí)r使用的單位
      landscapeWidth: 1920, // 橫屏?xí)r使用的視口寬度
    },
  },
};

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: