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é)點字體大小（“Math.min(scale, 2)” 指最高放大比例為2，可根據(jù)實際業(yè)務需求調整）
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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在nuxt使用vueX代替storage的實現(xiàn)方案
這篇文章主要介紹了在nuxt使用vueX代替storage的實現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue網(wǎng)絡請求方案原生網(wǎng)絡請求和js網(wǎng)絡請求庫
這篇文章主要為大家介紹了網(wǎng)絡請求方案原生網(wǎng)絡請求和js網(wǎng)絡請求庫的過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步2021-11-11
解決vue運行報錯Error:Cannot?find?module?'@vue/cli-plugin-b
解決了因為版本問題在創(chuàng)建項目時出現(xiàn)的各種報錯問題,這次在運行時出現(xiàn)的問題,下面這篇文章主要給大家介紹了關于解決vue運行報錯Error:Cannot?find?module?'@vue/cli-plugin-babel'的相關資料,需要的朋友可以參考下2023-04-04
這篇文章主要給大家介紹了關于如何使用Vue3構建一個圖像畫廊(支持圖片上傳)的相關資料,Vue畫廊這是vue編寫的圖庫應用程序,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
vue使用vuedraggable實現(xiàn)嵌套多層拖拽排序功能
這篇文章主要為大家詳細介紹了vue使用vuedraggable實現(xiàn)嵌套多層拖拽排序功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue項目中使用fetch的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了Vue.extend使用示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了vue怎樣獲得當前時間,并且傳遞給后端(不用注解)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
Vue3?echarts組件化及使用hook進行resize方式
這篇文章主要介紹了Vue3?echarts組件化及使用hook進行resize方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue 實現(xiàn)展開折疊效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08