vue項目自適應(yīng)屏幕分辨率實現(xiàn)步驟
npm install postcss-px2rem px2rem-loader --save
在根目錄src中新建utils目錄下新建rem.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中引入適配文件
import "./utils/rem.js"; // 自適應(yīng)分辨率
4、到vue.config.js中配置插件
// 引入等比適配插件 const px2rem = require('postcss-px2rem') // 配置基本大小 const postcss = px2rem({ // 基準(zhǔn)大小 baseSize,需要和rem.js中相同 remUnit: 16 }) // 使用等比適配插件 module.exports = { lintOnSave: true, css: { loaderOptions: { postcss: { plugins: [ postcss ] } } } }
*********************************** 第二種(大屏可用)***********************************
在外層文件中(包含所有的子組件)
onWindowResize() { const w = 1920 const h = 1080 const scaleW = document.body.clientWidth / w const scaleH = document.body.clientHeight / h const appDom = document.querySelector(".main") || null console.log(appDom) appDom.style.cssText = `transform: scale(${scaleW})` // appDom.style.cssText = `transform: scale(${scaleW}, ${scaleH})`; } mounted() { this.onWindowResize() setTimeout(() => { this.onWindowResize() }, 100) }, created() { // 設(shè)置每隔 3minute 更新頁面數(shù)據(jù) window.setInterval(() => { this.timer = setTimeout(() => { this.reLoadPage(); }, 0) }, 1000 * 60 * 3); window.addEventListener('resize', this.onWindowResize) }, destroyed() { window.removeEventListener('resize', this.onWindowResize) }
總結(jié)
到此這篇關(guān)于vue項目自適應(yīng)屏幕分辨率實現(xiàn)的文章就介紹到這了,更多相關(guān)vue自適應(yīng)屏幕分辨率內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue權(quán)限路由實現(xiàn)的方法示例總結(jié)
這篇文章主要給大家介紹了關(guān)于vue權(quán)限路由實現(xiàn)方法的相關(guān)資料,文中通過示例代碼介紹地方非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07vue本地打開build后生成的dist文件夾index.html問題
這篇文章主要介紹了vue本地打開build后生成的dist文件夾index.html問題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友參考下吧2019-09-09Vue?elementui如何實現(xiàn)表格selection的默認(rèn)勾選
這篇文章主要介紹了Vue?elementui如何實現(xiàn)表格selection的默認(rèn)勾選問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06vue2從數(shù)據(jù)變化到視圖變化發(fā)布訂閱模式詳解
這篇文章主要為大家介紹了vue2從數(shù)據(jù)變化到視圖變化發(fā)布訂閱模式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09