🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便！ 广告
[TOC] ## 概述 ## 原生 <details> <summary>rem 方案</summary> ``` <!DOCTYPE html> <!-- 方案三: rem布局方案 --> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>方案三 - rem布局</title> <script> // rem 适配 (function flexible(window, document) { const docEl = document.documentElement; const dpr = window.devicePixelRatio || 1; // 设置body字体大小 const setBodyFontSize = () => { if (document.body) { document.body.style.fontSize = (12 * dpr) + 'px'; } } // 设置 1rem = viewWidth / 10 const setRemUnit = () => { const rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + 'px'; } function isMobile() { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); } // 无需设置body字体大小 // setBodyFontSize(); if (isMobile()) { setRemUnit(); // 监听resize window.addEventListener('resize', setRemUnit); window.addEventListener('pageshow', function (e) { if (e.persisted) { setRemUnit(); } }); } else { docEl.style.fontSize = '75px'; /* 1rem=75px */ docEl.style.maxWidth = '750px'; // 750px 是设计稿的宽度 docEl.style.margin = '0 auto'; } }(window, document)); </script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; margin: 0 auto; } .container {} .header { height: 2rem; /* 150/75=2rem */ background: #5f27cd; color: #fff; line-height: 2rem; text-align: center; font-size: 0.8rem; width: 100%; } .grid { width: 100%; display: flex; flex-wrap: wrap; padding: 0.5rem; margin: -0.25rem; } .grid-item { width: calc(50% - 0.5rem); margin: 0.25rem; background: #c8d6e5; height: 8rem; border-radius: 0.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; } .grid-item img { width: 3rem; height: 3rem; margin-bottom: 0.5rem; } .grid-item .title { font-size: 0.7rem; color: #222f3e; } .list { padding: 0.5rem; } .list-item { height: 3rem; background: #f1f2f6; margin-bottom: 0.5rem; border-radius: 0.3rem; padding: 0 0.5rem; display: flex; align-items: center; font-size: 0.7rem; } </style> </head> <body> <div class="container"> <div class="header">rem布局示例</div> <div class="grid"> <div class="grid-item"> <img src="https://picsum.photos/100/100" alt="图标"> <span class="title">模块一</span> </div> <div class="grid-item"> <img src="https://picsum.photos/100/100" alt="图标"> <span class="title">模块二</span> </div> <div class="grid-item"> <img src="https://picsum.photos/100/100" alt="图标"> <span class="title">模块三</span> </div> <div class="grid-item"> <img src="https://picsum.photos/100/100" alt="图标"> <span class="title">模块四</span> </div> </div> <div class="list"> <div class="list-item">列表项目1</div> <div class="list-item">列表项目2</div> <div class="list-item">列表项目3</div> </div> </div> </body> </html> ``` </details> 效果 mobile ![](https://img.kancloud.cn/74/49/7449e5c7b30c79702ca1ca1e00e90ec4_414x758.png) pc ![](https://img.kancloud.cn/b7/b2/b7b2cb15ae06dc31f361bdb4e0f428dd_1022x982.png) ## 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: true, // 是否转换后直接更换属性值 mediaQuery: true, // 是否在媒体查询中转换px minPixelValue: 0, // 小于或等于`1px`不转换为rem exclude: /node_modules/i // 排除 node_modules 目录下的文件 }, tailwindcss: {}, }, }; export default config; ``` 运行的时候就会自动转换