ホームページ >ウェブフロントエンド >H5 チュートリアル >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 のフォント サイズは 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>
これは主に 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 サイトの他の関連記事を参照してください。