[TOC] > [概述](https://github.com/cuth/postcss-pxtorem) ## 概述 ## react 示例 可使用 postcss-pxtorem 需要添加 ``` pnpm install postcss-pxtorem --save-dev ``` 再全局中运行函数 ``` const setRemUnit = () => { const docEl = document.documentElement; const rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + 'px'; }; const isMobile = () => { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ); }; if (isMobile()) { setRemUnit(); window.addEventListener('resize', setRemUnit); window.addEventListener('pageshow', (e) => { if (e.persisted) { setRemUnit(); } }); } else { const docEl = document.documentElement; docEl.style.fontSize = '75px'; docEl.style.maxWidth = '750px'; docEl.style.margin = '0 auto'; } ``` postcss.config.mjs ``` /** @type {import('postcss-load-config').Config} */ const config = { plugins: { 'postcss-pxtorem': { rootValue: 75, // 设计稿宽度的1/10，这里假设设计稿为750px propList: ['*'], // 需要转换的属性，这里表示全部都进行转换 unitPrecision: 5, // 转换后的精度，即小数点位数 selectorBlackList: [], // 不转换的选择器，例如['body'] replace: false, // 是否转换后直接更换属性值 mediaQuery: true, // 是否在媒体查询中转换px minPixelValue: 0, // 小于或等于`1px`不转换为rem exclude: /node_modules/i // 排除 node_modules 目录下的文件 }, tailwindcss: {}, }, }; export default config; ``` 运行的时候就会自动转换