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