Webページのフォントサイズをユーザーが制御できるCSSの書き方_体験交流

現在、国内のほとんどのWebサイトではCSSを使用してフォントサイズを12pxに設定しています ピクセルも相対的なサイズの単位ですが、あくまで画面の解像度に対する相対的なものです 画面の解像度が一定の場合、フォントサイズが小さすぎると感じる場合は、難しい場合は、標準ブラウザ以外ではどうすることもできないので、単位をemに変更すると、CTRLマウススクロールで文字を拡大したり、メニューの表示>文字サイズで文字サイズを変更したりできます。言葉の大きさ。

設定方法

1. bodyタグのフォントサイズを62.5%に設定します。bodyにCSSの設定がない場合、ブラウザのデフォルトサイズは16pxで、62.5が設定されます。 . % の場合、フォント サイズ =16px*62.5%=10px このとき、em を使用するとサイズを簡単に設定できます。たとえば、12px を使用する必要がある場合は、1.2em に設定するだけです。

body{
font-size: 62.5%;
}

h1{
fong-size: 1.4em;/* h1 ワードのサイズは同等ですto 14px * /
}
2. body のフォント サイズを 75% に設定し、フォント サイズ = 16px*75%=12px、1em は 12px に相当します。

body{
font-size: 75%;
}

h1{
fong-size: 1.5em;/* h1 ワードのサイズは 18px に相当します */
}

最初の方法の方が良いです。

英語の Web サイトの場合は、small、x-small などに設定することもできます。

もちろん、この方法では、ページのデザイン要件が高くなります。