Vant+postcss-pxtorem 實現(xiàn)瀏覽器適配功能
更新時間：2021年02月05日 11:17:10 作者：Heroin、
這篇文章主要介紹了Vant+postcss-pxtorem 實現(xiàn)瀏覽器適配,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
Rem 布局適配
Vant 中的樣式默認使用 px 作為單位，如果需要使用 rem 單位，推薦使用以下兩個工具：
postcss-pxtorem 是一款 postcss 插件，用于將單位轉化為 rem
lib-flexible 用于設置 rem 基準值
看到最后有驚喜!
一、npm安裝
npm install postcss-pxtorem --save
二、新建.postcssrc.js做如下修改
注：
1、以下注釋代碼開啟后運行腳本會出現(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
// 設置 rem 函數
function setRem () {
// 當前頁面寬度相對于 750 寬的縮放比例，可根據自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 設置頁面根節(jié)點字體大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 rem
window.onresize = function () {
setRem()
}
四、在main.js中引入rem.js
import "./rem.js"
至此，Vant+postcss-pxtorem 實現(xiàn)瀏覽器適配就完成了。
即可直接在樣式中暢快的使用px且自動轉換成rem。
等等先別走?。?！客官。
以為到這里就結束了嗎?NO,往下看還有一份不基于postcss-pxtorem 來實現(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"
六、添加樣式全局變量并使用
// 當前頁面寬度相對于 750 寬的縮放比例，可根據自己需要修改。
$rem: (640/750)/40;
body{
width: $rem * 24rem;
}
到此這篇關于Vant+postcss-pxtorem 實現(xiàn)瀏覽器適配的文章就介紹到這了,更多相關Vant+postcss-pxtorem 適配內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JavaScript函數防抖與函數節(jié)流的定義及使用詳解
這篇文章主要為大家詳細介紹一下JavaScript中函數防抖與函數節(jié)流的定義及使用，文中的示例代碼講解詳細，對我們學習JS有一定幫助，需要的可以參考一下2022-08-08
本博客沒有華麗的布局,只求樸實的js的代碼,只為js代碼愛好者提供,一周大概會出1-2篇js前沿代碼的文章.只是代碼,不說技術2011-12-12
這篇文章主要介紹了Canvas 制作動態(tài)進度加載水球詳解及實例代碼的相關資料,這里附有實例代碼及實現(xiàn)效果圖，需要的朋友可以參考下2016-12-12
table tr行內td里面的input的值2009-12-12
JS文本框不能輸入空格驗證方法，需要的朋友可以參考一下2013-03-03
這篇文章主要介紹了js圖片輪播效果實現(xiàn)代碼，文章對每一步進行了詳細闡述，標注注意事項，為順利實現(xiàn)js圖片輪播效果做好鋪墊，對輪播效果感興趣的朋友可以參考一下2015-11-11
對于學習JavaScript的初學者來說，變量提升是繞不過去的一個知識點,簡單來說變量提升就是 JS會把var變量的聲明自動提升到作用域的頂部,這篇文章主要給大家介紹了關于JavaScript變量提升的相關資料,需要的朋友可以參考下2021-09-09
這篇文章主要給大家介紹了Three.js基礎學習之場景對象的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用three.js具有一定的參考學習價值，需要的朋友們下面隨著小編來一起看看吧。2017-09-09
JavaScript深度復制（deep clone）的實現(xiàn)方法
本文給大家介紹JavaScript深度復制（deep clone）的實現(xiàn)方法，涉及到js深度復制相關知識，本文介紹的非常詳細，特此分享腳本之家平臺供大家參考2016-02-02
這篇文章主要為大家詳細介紹了js圖片輪播插件的封裝代碼，只需要獲取到圖片和按鈕，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07