vue+px2rem實現(xiàn)pc端大屏自適應(yīng)的實例代碼(rem適配)
配置前言
項目構(gòu)建：基于vue-cli3構(gòu)建，使用postcss-px2rem px2rem-loader進(jìn)行rem適配
實現(xiàn)原理：每次打包，webpack通過使用插件postcss-px2rem，幫我們自動將px單位轉(zhuǎn)換成rem單位
px2rem是一個插件，功能是將px自動轉(zhuǎn)換為rem，幫助開發(fā)者減少像素間的相互轉(zhuǎn)換計算過程。
前方有坑：UI框架部分組件使用JavaScript將css作為內(nèi)聯(lián)樣式直接寫在html標(biāo)簽內(nèi)，打包適配時不會讀取相關(guān)css,所以要配置相關(guān)樣式，在style中需要" !important "進(jìn)行樣式覆蓋。
實現(xiàn)步驟
第一步，安裝postcss-px2rem及px2rem-loader
打開命令行工具，輸入以下指令安裝插件(當(dāng)然用淘寶鏡像cnpm安裝會更快)
npm install postcss-px2rem px2rem-loader --save
第二步，在根目錄src中新建util目錄下新建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é)點(diǎn)字體大小（“Math.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()
}
第三步，在main.js中引入適配文件
import './util/rem'
第四步，到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
]
}
}
}
}
總結(jié)
到此這篇關(guān)于vue+px2rem實現(xiàn)pc端大屏自適應(yīng)的文章就介紹到這了,更多相關(guān)vue+px2rem大屏自適應(yīng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于axios如何全局注冊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用axios具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
?最近需要再頁面里做個倒計時,發(fā)現(xiàn)用clearInterval()清除定時器失效,下面這篇文章主要給大家介紹了關(guān)于VUE設(shè)置和清除定時器的方式及遇到的問題的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇博客針對axios庫的核心代碼做一個簡要總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Element-ui Image圖片按需引入大圖預(yù)覽
這篇文章主要為大家介紹了Element-ui Image圖片按需引入大圖預(yù)覽實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
vue高德地圖JS API實現(xiàn)海量點(diǎn)標(biāo)記示例
本文主要介紹了vue高德地圖JS API實現(xiàn)海量點(diǎn)標(biāo)記示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue.js相比于Angular.js，Vue.js提供了更加簡潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。下面通過本文給大家分享vue.js語法及常用指令，希望對大家有所幫助2017-10-10
寫本篇文章之前其實也關(guān)注過vue中的一個關(guān)于加載動態(tài)組件is的API，最開始研究它只是用來實現(xiàn)一個tab切換的功能,需要的朋友可以參考下2019-05-05
Vuex進(jìn)行Echarts數(shù)據(jù)頁面初始化后如何更新dom
這篇文章主要為大家詳細(xì)介紹了使用Vuex做Echarts數(shù)據(jù)時,當(dāng)頁面初始化后如何更新dom,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
淺談vue.js導(dǎo)入css庫(elementUi)的方法
下面小編就為大家分享一篇淺談vue.js導(dǎo)入css庫(elementUi)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家介紹了關(guān)于vue中如何實時監(jiān)聽div元素盒子的寬高的相關(guān)資料,在Vue中你可以使用Vue的計算屬性和偵聽器來動態(tài)監(jiān)測元素的高度,文中給出了簡單代碼示例,需要的朋友可以參考下2023-09-09