Rem 布局適配
Vant 中的樣式默認使用 px 作為單位，如果需要使用 rem 單位，推薦使用以下兩個工具：
postcss-pxtorem 是一款 postcss 插件，用于將單位轉化為 rem
lib-flexible 用于設置 rem 基準值
看到最后有驚喜!
一、npm安裝
|
1
|
npm install postcss-pxtorem --save |
二、新建.postcssrc.js做如下修改
注：
1、以下注釋代碼開啟后運行腳本會出現報錯的提示,雖不知道有什么用,注釋就好啦。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
module.exports = { "plugins": { //"postcss-import": {}, //"postcss-url": {}, "autoprefixer": { browsers: ['Android >= 4.0', 'iOS >= 7'] }, "postcss-pxtorem": { "rootValue": 32, "propList": ["*"] } }} |
三、新建rem.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
const baseSize = 32// 設置 rem 函數function setRem () { // 當前頁面寬度相對于 750 寬的縮放比例，可根據自己需要修改。 const scale = document.documentElement.clientWidth / 750 // 設置頁面根節點字體大小 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'}// 初始化setRem()// 改變窗口大小時重新設置 remwindow.onresize = function () { setRem()} |
四、在main.js中引入rem.js
|
1
|
import "./rem.js" |
至此，Vant+postcss-pxtorem 實現瀏覽器適配就完成了。
即可直接在樣式中暢快的使用px且自動轉換成rem。
等等先別走?。。】凸佟?br />
以為到這里就結束了嗎?NO,往下看還有一份不基于postcss-pxtorem 來實現的rem適配哦。
話不多說直接上代碼。
五、新建rem.js并再main.js中引入
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
(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" |
六、添加樣式全局變量并使用
|
1
2
3
4
5
|
// 當前頁面寬度相對于 750 寬的縮放比例，可根據自己需要修改。$rem: (640/750)/40;body{ width: $rem * 24rem;} |
到此這篇關于Vant+postcss-pxtorem 實現瀏覽器適配的文章就介紹到這了,更多相關Vant+postcss-pxtorem 適配內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_44052136/article/details/113647030
