vue+px2rem實(shí)現(xiàn)pc端大屏自適應(yīng)的實(shí)例代碼(rem適配)

更新時(shí)間：2021年08月18日 09:55:35 作者：楚猴修

不管是移動(dòng)端的適配,還是大屏需求,都離不開(kāi)不一個(gè)單位rem,rem是相對(duì)于根元素的字體大小的單位,下面這篇文章主要給大家介紹了關(guān)于vue+px2rem實(shí)現(xiàn)pc端大屏自適應(yīng)的相關(guān)資料,需要的朋友可以參考下

配置前言

項(xiàng)目構(gòu)建：基于vue-cli3構(gòu)建，使用postcss-px2rem px2rem-loader進(jìn)行rem適配

實(shí)現(xiàn)原理：每次打包，webpack通過(guò)使用插件postcss-px2rem，幫我們自動(dòng)將px單位轉(zhuǎn)換成rem單位

px2rem是一個(gè)插件，功能是將px自動(dòng)轉(zhuǎn)換為rem，幫助開(kāi)發(fā)者減少像素間的相互轉(zhuǎn)換計(jì)算過(guò)程。

前方有坑：UI框架部分組件使用JavaScript將css作為內(nèi)聯(lián)樣式直接寫(xiě)在html標(biāo)簽內(nèi)，打包適配時(shí)不會(huì)讀取相關(guān)css,所以要配置相關(guān)樣式，在style中需要" !important "進(jìn)行樣式覆蓋。

實(shí)現(xiàn)步驟

第一步，安裝postcss-px2rem及px2rem-loader

打開(kāi)命令行工具，輸入以下指令安裝插件(當(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)前頁(yè)面寬度相對(duì)于 1920寬的縮放比例，可根據(jù)自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 設(shè)置頁(yè)面根節(jié)點(diǎn)字體大?。ā癕ath.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)文章

在nuxt使用vueX代替storage的實(shí)現(xiàn)方案
這篇文章主要介紹了在nuxt使用vueX代替storage的實(shí)現(xiàn)方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue網(wǎng)絡(luò)請(qǐng)求方案原生網(wǎng)絡(luò)請(qǐng)求和js網(wǎng)絡(luò)請(qǐng)求庫(kù)
這篇文章主要為大家介紹了網(wǎng)絡(luò)請(qǐng)求方案原生網(wǎng)絡(luò)請(qǐng)求和js網(wǎng)絡(luò)請(qǐng)求庫(kù)的過(guò)程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步
2021-11-11
解決vue運(yùn)行報(bào)錯(cuò)Error:Cannot?find?module?'@vue/cli-plugin-b
解決了因?yàn)榘姹締?wèn)題在創(chuàng)建項(xiàng)目時(shí)出現(xiàn)的各種報(bào)錯(cuò)問(wèn)題,這次在運(yùn)行時(shí)出現(xiàn)的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于解決vue運(yùn)行報(bào)錯(cuò)Error:Cannot?find?module?'@vue/cli-plugin-babel'的相關(guān)資料,需要的朋友可以參考下
2023-04-04
如何使用Vue3構(gòu)建一個(gè)圖像畫(huà)廊(支持圖片上傳)
這篇文章主要給大家介紹了關(guān)于如何使用Vue3構(gòu)建一個(gè)圖像畫(huà)廊(支持圖片上傳)的相關(guān)資料,Vue畫(huà)廊這是vue編寫(xiě)的圖庫(kù)應(yīng)用程序,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
vue使用vuedraggable實(shí)現(xiàn)嵌套多層拖拽排序功能
這篇文章主要為大家詳細(xì)介紹了vue使用vuedraggable實(shí)現(xiàn)嵌套多層拖拽排序功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue項(xiàng)目中使用fetch的實(shí)現(xiàn)方法
這篇文章主要介紹了vue項(xiàng)目中使用fetch的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue extend使用示例深入分析
這篇文章主要介紹了Vue.extend使用示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
vue怎樣獲取當(dāng)前時(shí)間,并且傳遞給后端(不用注解)
這篇文章主要介紹了vue怎樣獲得當(dāng)前時(shí)間,并且傳遞給后端(不用注解)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12
Vue3?echarts組件化及使用hook進(jìn)行resize方式
這篇文章主要介紹了Vue3?echarts組件化及使用hook進(jìn)行resize方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue 實(shí)現(xiàn)展開(kāi)折疊效果的示例代碼
這篇文章主要介紹了Vue 實(shí)現(xiàn)展開(kāi)折疊效果的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08