postcss-pxtorem是一個(gè)PostCSS插件戳稽，它可以將CSS中的像素單位（px）轉(zhuǎn)換為rem或者其他單位负敏。該插件的主要目的是幫助開(kāi)發(fā)者以固定的比例將px轉(zhuǎn)換為rem庶艾，以便實(shí)現(xiàn)響應(yīng)式布局溃论。
# px2rem 安裝
npm install postcss-loader --save-dev
npm install postcss postcss-pxtorem --save-dev
該插件可以在CSS中自動(dòng)轉(zhuǎn)換像素單位為rem悠栓，它需要一個(gè)配置選項(xiàng)圈澈，包括轉(zhuǎn)換比例惫周、需要轉(zhuǎn)換的像素單位、不需要轉(zhuǎn)換的選擇器等康栈。開(kāi)發(fā)者可以根據(jù)自己的需要自定義這些配置選項(xiàng)递递。
module.exports = {
plugins: [
require('autoprefixer'),
{
'postcss-pxtorem': {
rootValue: 16,
unitPrecision: 5,
propList: ['*'],
selectorBlackList: [],
replace: true,
mediaQuery: false,
minPixelValue: 0,
exclude: [/node_modules/i, /public/]
},
}
],
}
使用postcss-pxtorem有幾個(gè)好處。
- 可以幫助開(kāi)發(fā)者在移動(dòng)端實(shí)現(xiàn)響應(yīng)式布局啥么。因?yàn)樵谝苿?dòng)端登舞，屏幕的大小和分辨率是不同的，使用像素單位可能會(huì)導(dǎo)致頁(yè)面布局混亂悬荣。而使用rem單位菠秒，可以根據(jù)根元素的字號(hào)大小自動(dòng)適應(yīng)不同的屏幕大小和分辨率。
- 使用rem單位也可以提高網(wǎng)站的可訪問(wèn)性氯迂，因?yàn)榭梢宰層脩舾鶕?jù)自己的需求調(diào)整瀏覽器的字號(hào)大小践叠，而不會(huì)影響頁(yè)面的布局。
react 配合以下hooks代碼實(shí)現(xiàn)大屏幕小屏幕嚼蚀，等比例排版
import React, {FC, useState, useEffect, Fragment} from "react";
import device from 'current-device'
/*************** px2rem ******************/
/*************** px2rem ******************/
export const usePxToRem = () => {
const [isMobile, setIsMobile] = useState<boolean>(false)
useEffect(() => {
const map1Rem: number = 16 * 100 / 1920
document.documentElement.style.fontSize = `${map1Rem}vw`
if (device.mobile()) {
console.log(document.body.clientWidth)
const map1Rem: number = 16 * 100 / 375
document.documentElement.style.fontSize = `${map1Rem}vw`
}
setIsMobile(device.mobile())
/****************禁止微信內(nèi)置瀏覽器改變字體大小**********************/
// eslint-disable-next-line no-undef
// @ts-ignore
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
// @ts-ignore
} else if (document.attachEvent) {
// @ts-ignore
document.attachEvent("WeixinJSBridgeReady", handleFontSize);
// @ts-ignore
document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
}
}
function handleFontSize() {
// 設(shè)置網(wǎng)頁(yè)字體為默認(rèn)大小
// eslint-disable-next-line no-undef
// @ts-ignore
WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
// 重寫(xiě)設(shè)置網(wǎng)頁(yè)字體大小的事件
// eslint-disable-next-line no-undef
// @ts-ignore
WeixinJSBridge.on('menu:setfont', function () {
// eslint-disable-next-line no-undef
// @ts-ignore
WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
});
}
}, [])
return [isMobile]
}
export default usePxToRem
