rem 方案的示例 · PHP/Python/前端/Linux 等等學習筆記

[TOC] ## 概述 ## 原生 <details> <summary>rem 方案</summary> ``` <!DOCTYPE html>  <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; ``` 運行的時候就會自動轉換