[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; ``` 運行的時候就會自動轉換