vue大屏自適應的實現方法(cv就能用)
更新時間：2022年06月02日 09:59:12 作者：萬萬沒想到_
最近在用VUE寫大屏頁面,遇到屏幕自適應問題,下面這篇文章主要給大家介紹了關于vue大屏自適應的實現方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
前言
第一次接觸大屏，領導給任務，讓適配大小屏幕，然后我就面向百度了hhhh，看了很多版本都不太一樣，于是我自己總結了一份，奶媽式教程，手把手教學，直接cv就可以用，這個方法也可以用來做移動端適配，只需要把 postcss.config.js文件里的大小改成移動端的設計稿大小/10，移動端俺沒有實踐過，小伙伴們需要的話可以試試哦，不出意外的話是沒問題的吼吼
大屏
第一步：先下包，這里用到lib-flexible和postcss-pxtorem
直接下載postcss-pxtorem的話會報錯，所以這里我們下載指定版本postcss-pxtorem@5.1.1
npm下載
npm install lib-flexible --save-dev
postcss-pxtorem：自動把px轉成rmm
npm install postcss-pxtorem@5.1.1 --save-dev
yarn 下載
yarn add lib-flexible yarn add postcss-pxtorem@5.1.1
第二步：在main.js引入
import 'lib-flexible'
第三步：修改lib-flexible源文件配置
修改node_modules里lib-flexible里flexible.js，找到refreshRem 函數修改：
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr < 540) {
width = 540 * dpr;
}else if(width / dpr > 1980){
width = 1980 * dpr
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}注意：這里只需要修改屏幕最大寬度和最小寬度即可（540和1980）
第四步：在vue.config.js里配置
module.exports = {
css: {
sourceMap: false,
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
},
},
},
}第五步：在vue.config.js同級新建postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 192,
propList: ['*'],
},
},
}注意：這里的rootValue可以根據設計稿的大小/10即可
最后重新 npm run dev 或 yarn dev就ok啦
但是要注意，如果刪除了node_modules的依賴，重新下載之后還是需要重新修改配置文件
總結
到此這篇關于vue大屏自適應實現的文章就介紹到這了,更多相關vue大屏自適應內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于ElementUI中兩個Select選擇聯動效果實現的相關資料,在前端項目開發(fā)中,經常會遇到省市縣三級聯動的下拉列表框組的問題,需要的朋友可以參考下2023-08-08
本篇文章主要介紹了jquery在vue腳手架中的使用方式示例，非常具有實用價值，需要的朋友可以參考下2017-08-08
vue?cli+axios踩坑記錄+攔截器使用方式,代理跨域proxy
這篇文章主要介紹了vue?cli+axios踩坑記錄+攔截器使用方式,代理跨域proxy，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。這篇文章主要介紹了vue中使用sessionStorage記住密碼功能,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Vue工程模板文件 webpack打包配置,需要的朋友可以參考下2017-12-12
html頁面引入vue組件之http-vue-loader.js解讀
這篇文章主要介紹了html頁面引入vue組件之http-vue-loader.js解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
VUE前端從后臺請求過來的數據進行轉換數據結構操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue3是一款流行的前端框架,它支持多種傳值方式,包括兄弟組件之間的傳值,本文主要介紹了vue3+ts 兄弟組件之間傳值的實現,具有一定的參考價值,感興趣的可以了解一下2023-11-11
這篇文章主要介紹了vue 配置多頁面應用的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了淺談Vue 函數式組件的使用技巧，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06