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