font-scaling with root element and rem in CSS

Question

I am using html tag to define the global font-size and using rem to scale the font. Since I am building a web-component that would be included in many other applications. Hence defining the font size on html tag will break consumers font-size. So how to solve this issue.

Question : Is there any possibilities REM to calculate the font size not from HTML tag as root element but the root of my web-component ?

Please find a small example here my font-scaling but I want to define the base-font size not on html tag but on web-component or any other work-around would be also fine.

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> **

**

Here is my rule for font-scaling

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

simply use em . em is relative to the parent element whereas rem is relative to the root element. in case you apply em to the root element, it would be equivalent to rem .