I know that system font size is supposed to update font size of the HTML tag, which is 1rem in CSS. So I was expecting that if I do not touch HTML font and just use REM units across my website — it would be affected by this setting. However this doesn’t seem to work for me on Xiaomi 12T with latest MIUI. What is the most weird is that I noticed that footer size on the main page of Wikipedia is affected by system font size for me:
https://www.wikipedia.org
I tried recreating the styles they use but it still did not help and I couldn’t find any real answer as to how to enable this, almost as if it should work out of the box.
EDIT:
I have created this minimal piece of HTML that kind of works, but only for text, the DIV that is sized in REMs does not change its size:
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style>
html {
font-size: 100%;
}
div {
width: 3rem;
height: 3rem;
background: red;
}
</style>
</head>
<body>
<main>
<h1>Test</h1>
<section>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.</section>
<div></div>
</main>
</body>
</html>
Moreover, if I cut section content in half (just remove half of the text) it stops scaling. This is driving me crazy, how can this be?
You need to sign in to view this answers
Leave feedback about this