css3でレムは何を意味しますか

css3 の rem は相対単位であり、ルート要素のフォント サイズに対する相対的な単位です。rem を使用する利点は、サブ要素に関連するサイズを計算するときに、次の値を計算するだけで済むことです。 html要素のフォントサイズに基づいて計算されます。

#この記事の動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

css3 における rem とはどういう意味ですか?

css3のremの詳細説明

rem: ルート要素のフォントサイズの単位に対する相対単位です。もっと率直に言うと、HTML 要素のフォントに相対的なサイズ単位です。

利点: サブ要素のサイズを計算するときは、HTML 要素のフォント サイズに基づいて計算するだけで済みます。 em を使用しているときとは異なり、頻繁に計算するために親要素のフォント サイズを見つけるために何度も行ったり来たりする必要があり、電卓がなければまったく実行できません。

私はちょうどモバイル端末プロジェクトを終えたところですが、ここでいくつかの小さな成果を共有したいと思います。不足がある場合はご相談ください。

html のフォント サイズは font-size:62.5% に設定されています。理由: ブラウザのデフォルトのフォント サイズは 16px です。rem と px の関係は次のとおりです: 1rem = 10px、10/16=0.625 =62.5%、子要素の場合 関連する寸法は計算が簡単なので、このように記述するのが最適です。デザインドラフトで測定したピクセルサイズを10で割るだけで、対応するレムサイズが得られます。これは非常に便利です。もちろん、html要素を直接10pxに設定することも可能です。 62.5%には慣れてきました。わかりやすい参考画像を見つけました。次のように:

# プロジェクトで遭遇した問題について話しましょう。

通常の記述方法によると、コードは次のとおりです。

html { font-size:62.5%; }
.menu{ width:100%; height:8.8rem; background:#000; line-height:8.8rem;color:#fff;font-size:3.2rem; text-align:center; }

デバッグ ツール: chrome

レンダリングのサイズは次のとおりです。

高さは 88 であるべきではありませんか? なぜそんなに大きいのでしょうか? Chrome では 12 ピクセルより小さいフォントを 12 ピクセルとして扱います。これは落とし穴です。 8.8*10=88,8.8*x=105.59、計算結果はx=11.999、ブラウザの計算で誤差が生じます、たまたま12pxだっただけです。

この穴を回避し、HTML フォント サイズを 625%、つまり 100 ピクセルに直接設定します。もう一度効果を見てみましょう。

クロムの 12 ピクセルのアキレス腱を回避して、美しい 88 が帰ってきました。

デバイス適応:

非常に簡単で、このプロジェクトのデザイン案は640なので、640を参考にしてHTMLフォントを625%に設定するだけです。 88px は .88rem に直接変換できます。これは、320、88px 要素は 44px など、他のサイズのデバイスに適しています。要素のサイズが直接計算される場合、rem を導入する意味はありません。直接使用します。 HTML フォントを変更するメディア クエリ サイズを 312.5% に設定するだけで、要素サイズのセットを 1 セット記述するだけで済みます。一連のデザイン ドラフトはさまざまなサイズのデバイスに適しており、思いのままに楽しめます。計算方法: 320/640*625%=312.5% その他のサイズの場合は、320 を対応するサイズに変更してください。

推奨学習: 「

css ビデオ チュートリアル 」

以上がcss3でレムは何を意味しますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。