postcss-pxtorem是一个PostCSS插件，它可以将CSS中的像素单位（px）转换为rem或者其他单位。该插件的主要目的是帮助开发者以固定的比例将px转换为rem，以便实现响应式布局。
# px2rem 安装
npm install postcss-loader --save-dev
npm install postcss postcss-pxtorem --save-dev
该插件可以在CSS中自动转换像素单位为rem，它需要一个配置选项，包括转换比例、需要转换的像素单位、不需要转换的选择器等。开发者可以根据自己的需要自定义这些配置选项。
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有几个好处。
- 可以帮助开发者在移动端实现响应式布局。因为在移动端，屏幕的大小和分辨率是不同的，使用像素单位可能会导致页面布局混乱。而使用rem单位，可以根据根元素的字号大小自动适应不同的屏幕大小和分辨率。
- 使用rem单位也可以提高网站的可访问性，因为可以让用户根据自己的需求调整浏览器的字号大小，而不会影响页面的布局。
react 配合以下hooks代码实现大屏幕小屏幕，等比例排版
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())
/****************禁止微信内置浏览器改变字体大小**********************/
// 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() {
// 设置网页字体为默认大小
// eslint-disable-next-line no-undef
// @ts-ignore
WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
// 重写设置网页字体大小的事件
// 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
