Chrome ブラウザーでレム計算エラーが発生する理由を探る_html/css_WEB-ITnose

最近、あるプロジェクトで、テスト生が携帯電話のページ上の一部のフォントが大きすぎるとバグを報告しました。このように

Chromeブラウザを使用してPCでテストしたところ、この問題がPCにも存在することがわかりましたが、他のブラウザでこのページを開いたときはこの問題は見つかりませんでした。

そこで、オンラインで百度を検索したところ、Chrome ブラウザの問題であることがわかりました。

さまざまな Baidu Google を通じて、この問題の原因を要約しました:

Chrome ブラウザーで現在サポートされている最小フォント サイズは 12px で、HTML ルート要素に font-size:62.5% を設定しました。計算後、それは 10 ピクセル、1 レム = 10 ピクセルです。

マイページのフォントサイズは10pxを基準に計算されているため、Chromeブラウザがフォントサイズを計算する際にエラーが発生しました。

解決策:

BaiduとGoogleで検索した後、この問題の解決策をまとめました。

オンラインで利用できる 2 つの最も一般的なソリューションは、

1. js メソッド

<script type="text/javascript">document.body.style.fontSize = '1.6rem';</script>

特定のフォント サイズはプロジェクトによって異なります

2. css メソッド

<style>body {font-size: 1.6rem;}</style>

これをスタイルします。 headタグ

両方の方法を試しましたが、何が起こっているのかわかりません。知っている人がいたら教えていただければ幸いです。

したがって、現時点で最も根本的な解決策は、HTML ルート要素の font-size を 12px 以上に設定することだと思います。

いくつかの疑問:

1. 1rem が 12px 未満の場合、Chrome はどのように計算しますか。

上の図に示すように、私の HTML ルート要素の font-size は 62.5% (10px) に設定されています。この図ではフォントが 25px ではなく 28.5941px に設定されています。この数値は、最小の 12px に基づいて計算すると、30px になるはずです。

2. 一部のフォントは正しく計算され、他のフォントは正しく計算されないのはなぜですか?

上の図に示すように、フォントも 2.5rem に設定されていますが、正しく 25px に計算できるものもありますが、何が起こっているのでしょうか。

理由が分かる方、アドバイスを頂ければ幸いです。