588. 【前端】postcss-pxtorem[2023-09

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有几个好处。

1. 可以帮助开发者在移动端实现响应式布局。因为在移动端，屏幕的大小和分辨率是不同的，使用像素单位可能会导致页面布局混乱。而使用rem单位，可以根据根元素的字号大小自动适应不同的屏幕大小和分辨率。
2. 使用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