頁面字體fontsize自適應（在頁app.vue頁面添加）

將css里面的html和body的font-size都設置成62.5%然后10px=1rem這樣寫頁面

<script> const rootHeight = 940; </script>mounted() {let html = document.getElementsByTagName('html');html[0].style.fontSize = `${Math.max(document.body.clientHeight, 768) / rootHeight * 62.5}%`;window.onresize = () => {html[0].style.fontSize = `${Math.max(document.body.clientHeight, 768) / rootHeight * 62.5}%`;}},const rootWidth = 1920 onMounted(() => {const html = document.getElementsByTagName('html')html[0].style.fontSize = `${Math.max(document.body.clientWidth, 1024) / rootWidth * 62.5}%`}window.onresize = () => {const html = document.getElementsByTagName('html')html[0].style.fontSize = `${Math.max(document.body.clientWidth, 1024) / rootWidth * 62.5}%`}

---

---

echarts圖表的自適應（不同分辨率下的顯示）

// echarts配置中 * 圖表這里的option.js 里面的配置 字號 間距什么的都加了*wScale 這個 import Vue from "vue" let wScale = Vue.prototype.$wScale;itemWidth: 50 * wScale , wdth: 50 * wScale , fontSize: 16 * wScale ,// main.js import "./utils/scale";// scale.js import Vue from "vue" const fullWidth = 1920,fullHeight = 940; // 長寬屏幕比 Vue.prototype.$wScale = document.body.clientWidth / fullWidth Vue.prototype.$hScale = document.body.clientWidth / fullHeight

總結

以上是生活随笔為你收集整理的vue项目使用rem让页面字体fontsize自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。