REM相対ユニットのユースケース共有

今回は、REM 相対単位の使用例を紹介します。REM 相対単位を使用する際の注意点は何ですか? 以下は実際の例です。

rem (ルート要素のフォント サイズ) は、ルート要素に対する相対的なフォント サイズの単位を指します。簡単に言えば、相対的な単位です。 rem を見ると、em 単位 (要素のフォント サイズ) を思い浮かべるでしょう。これは、親要素に対する相対的なフォント サイズの単位を指します。これらは実際には非常によく似ていますが、一方の計算ルールはルート要素に依存し、もう一方の計算ルールは親要素に依存して計算される点が異なります。

前述したように、Web ページのルート要素は html を参照します HTML のフォント サイズを設定することで rem のサイズを制御できます たとえば、 。

<span style="font-size: 14px;">html{<br>    font-size:20px;<br>}<br>.btn {<br>    width: 6rem;<br>    height: 3rem;<br>    line-height: 3rem;<br>    font-size: 1.2rem;<br>    display: inline-block;<br>    background: #06c;<br>    color: #fff;<br>    border-radius: .5rem;<br>    text-decoration: none;<br>    text-align: center;    <br>}</span>

HTML の font-size のサイズを変更することで、dom 要素のフォント サイズを制御します。

さまざまな解像度の互換性に適応するために、HTML のフォント サイズは js を通じて動的に生成でき、主流モデルのメディア クエリを通じて設定することもできます。たとえば、次のコードはメディア クエリについて詳しくない場合は、http://www.w3cplus.com/content/css3-media-queries

<span style="font-size: 14px;">html{font-size: 20px;}<br>@media only screen and (min-width: 320px){<br>    html{font-size: 20px !important;}<br>}<br>@media only screen and (min-width: 350px){<br>    html{font-size: 22.5px !important;}<br>}<br>@media only screen and (min-width: 365px){<br>    html{font-size: 23px !important;}<br>}<br>@media only screen and (min-width: 375px){<br>    html{font-size: 23.5px !important;}<br>}<br>@media only screen and (min-width: 390px){<br>    html{font-size: 24.5px !important;}<br>}<br>@media only screen and (min-width: 400px){<br>    html{font-size: 25px !important;}<br>}<br>@media only screen and (min-width: 428px){<br>    html{font-size: 26.8px !important;}<br>}<br>@media only screen and (min-width: 432px){<br>    html{font-size: 27.4px !important;}<br>}<br>@media only screen and (min-width: 481px){<br>    html{font-size: 30px !important;}<br>}<br>@media only screen and (min-width: 569px){<br>    html{font-size: 35px !important;}<br>}<br>@media only screen and (min-width: 641px){<br>    html{font-size: 40px !important;}<br>}</span>

を勉強してください。 HTML の font-size についても、 html { font-size: 62.5% } のように記述されているのを目にすることがあります。

これは主に em と px の間の変換を容易にするためです。em の初期値は 1em=16px です。この場合、たとえば 1.2em = 19.2px になりますが、19.2px で表されるサイズはほとんどありません。つまり、サイズを表すために px を使用する場合、値には小数点以下の桁がありません。 body{font-size: が設定されている場合 62.5%;}、1em = 16px*62.5% = 10px、1.2em = 12px、これはもっと簡単で正確ではありませんか~~。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

一般的に使用される <メタコード構成の概要

H5+Canvas の使用例の詳細な説明

以上がREM相対ユニットのユースケース共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。