在 CSS 中使用根元素和 rem 進行字體縮放

Question

我正在使用html標記來定義全局字體大小並使用rem來縮放字體。 因為我正在構建一個將包含在許多其他應用程序中的web-component 。 因此，在html標簽上定義字體大小將破壞消費者的字體大小。 那么如何解決這個問題。

問題：REM 是否有可能計算字體大小不是從 HTML 標記作為根元素而是我的web-component的根？

請在此處找到一個小示例，我的字體縮放但我想定義基本字體大小，而不是在 html 標記上，而是在 web 組件或任何其他解決方法上也可以。

https://codepen.io/rajkeshwar-the-bold/pen/PMwRGe

 ** function getDeviceName(width) { let deviceType = 'Mobile'; if(window.screen.width < 768) { deviceType = 'Mobile'; } else if(width >= 768 && width < 1201) { deviceType = 'Tablet'; } else if(width >= 1201) { deviceType = 'Desktop'; } return deviceType; } function detectDeviceWidth(row, width) { const { fontSize, lineHeight } = window.getComputedStyle(row); row.innerText = `${getDeviceName(width)} - ${fontSize}/${lineHeight}`; } function triggerMediaQueries() { const rows = document.querySelectorAll('.row'); Array.from(rows).forEach(detectDeviceWidth); } window.addEventListener('load', triggerMediaQueries); var ro = new ResizeObserver(entries => { for (let entry of entries) { const cr = entry.contentRect; const rows = document.querySelectorAll('.row'); Array.from(rows).forEach(row => detectDeviceWidth(row, cr.width)); } }); // Observe one or multiple elements ro.observe(document.body); **

 ** html { font-size: 100%; line-height: 24px; } @media (min-width: 48rem) { html { font-size: 112.5%; line-height: 27px; } } @media (min-width: 75.0625rem) { html { font-size: 137.5%; line-height: 33px; } } *, *::before, *::after { box-sizing: border-box; } body { font-family: Arial, sans-serif; }.container { padding: 5px; width: 100%; background: #fff; background: #ccc; } @media (min-width: 48rem) {.container { padding: 100px; } }.row { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; background: #fff; height: 100px; color: #666666; position: relative; border: none; }.font100 { font-size: 0.75rem; line-height: 1rem; }.font200 { font-size: 0.875rem; line-height: 1.25rem; }.font300 { font-size: 1rem; line-height: 1.5rem; }.font400 { font-size: 1.1875rem; line-height: 1.75rem; }.font500 { font-size: 1.5rem; line-height: 2rem; }.font600 { font-size: 1.75rem; line-height: 2.25rem; }.font700 { font-size: 2.3125rem; line-height: 3rem; } @media (min-width: 48rem) {.row { border: 3px solid green; } } @media (min-width: 75.0625rem) {.row { border: 3px solid blue; } } **

 ** <div class="container"> <h3>Font value 100</h3> <div class="font100 row"></div> <h3>Font value 200</h3> <div class="font200 row"></div> <h3>Font value 300</h3> <div class="font300 row"></div> <h3>Font value 400</h3> <div class="font400 row"></div> <h3>Font value 500</h3> <div class="font500 row"></div> <h3>Font value 600</h3> <div class="font600 row"></div> <h3>Font value 700</h3> <div class="font700 row"></div> </div> **

**

這是我的字體縮放規則

html { font-size: 100%; line-height: 24px; } @media (min-width: 48rem) { html { font-size: 112.5%; line-height: 27px; } } @media (min-width: 75.0625rem) { html { font-size: 137.5%; line-height: 33px; } }

Answer 1

只需使用em 。 em是相對於父元素的，而rem是相對於根元素的。 如果您將em應用於根元素，它將等效於rem 。