I am using the <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 the <html> tag will break consumers font-size. So how to solve this issue.
Is there any possibilities REM to calculate the font size not from HTML tag as root element but the root of my web-component?
I want to define the base-font size not on the <html> tag, but on a web-component... any other workaround would be also fine.
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;
}
}
simply use
em.emis relative to the parent element whereasremis relative to the root element. in case you applyemto the root element, it would be equivalent torem.