快捷導(dǎo)航

Vant+postcss-pxtorem 實(shí)現(xiàn)瀏覽器適配功能

更新時間：2021年02月05日 11:17:10 作者：Heroin、

這篇文章主要介紹了Vant+postcss-pxtorem 實(shí)現(xiàn)瀏覽器適配,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

Rem 布局適配
Vant 中的樣式默認(rèn)使用 px 作為單位，如果需要使用 rem 單位，推薦使用以下兩個工具：
postcss-pxtorem 是一款 postcss 插件，用于將單位轉(zhuǎn)化為 rem
lib-flexible 用于設(shè)置 rem 基準(zhǔn)值
看到最后有驚喜!

一、npm安裝

npm install postcss-pxtorem --save

二、新建.postcssrc.js做如下修改

注：
1、以下注釋代碼開啟后運(yùn)行腳本會出現(xiàn)報錯的提示,雖不知道有什么用,注釋就好啦。

module.exports = {
 "plugins": {
 	//"postcss-import": {},
  //"postcss-url": {},
  "autoprefixer": {
   browsers: ['Android >= 4.0', 'iOS >= 7']
  },
  "postcss-pxtorem": {
   "rootValue": 32,
   "propList": ["*"]
  }
 }
}

三、新建rem.js

const baseSize = 32
// 設(shè)置 rem 函數(shù)
function setRem () {
 // 當(dāng)前頁面寬度相對于 750 寬的縮放比例，可根據(jù)自己需要修改。
 const scale = document.documentElement.clientWidth / 750
 // 設(shè)置頁面根節(jié)點(diǎn)字體大小
 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設(shè)置 rem
window.onresize = function () {
 setRem()
}

四、在main.js中引入rem.js

import "./rem.js"

至此，Vant+postcss-pxtorem 實(shí)現(xiàn)瀏覽器適配就完成了。
即可直接在樣式中暢快的使用px且自動轉(zhuǎn)換成rem。
等等先別走！?。】凸?。
以為到這里就結(jié)束了嗎?NO,往下看還有一份不基于postcss-pxtorem 來實(shí)現(xiàn)的rem適配哦。
話不多說直接上代碼。

五、新建rem.js并再main.js中引入

(function (doc, win) {
 var docEl = doc.documentElement
 var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
 var recalc = function () {
  var clientWidth = docEl.clientWidth
  if (!clientWidth) return
  if (parseInt(20 * (clientWidth / 320)) > 35) {
   docEl.style.fontSize = 35 + 'px'
  } else {
   docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'
  }
 }
 if (!doc.addEventListener) return
 win.addEventListener(resizeEvt, recalc, false)
 doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

import "./rem.js"

六、添加樣式全局變量并使用

// 當(dāng)前頁面寬度相對于 750 寬的縮放比例，可根據(jù)自己需要修改。
$rem: (640/750)/40;
body{
	width: $rem * 24rem;
}

到此這篇關(guān)于Vant+postcss-pxtorem 實(shí)現(xiàn)瀏覽器適配的文章就介紹到這了,更多相關(guān)Vant+postcss-pxtorem 適配內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: