在 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 。