worpdress 21-12 テーマから取られた、次の css クラス定義を検討してください。
.entry-header {
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
}
margin-bottom
が2 回定義されpx
ているのはなぜrem
ですか? ブラウザはどの単位を選択しますか?
rem
すべてのブラウザでサポートされているわけではないためだと思います。
caniuse
ブラウザ サポートの詳細については、をご覧ください。
したがって、彼らはそれをpx
古いものとrem
それをサポートするものとして定義しました。
すべてのブラウザーがこのrem
ユニットをサポートしているわけではありません - 今まで聞いたことがありませんでした! それをサポートしていないブラウザーは、px
値を使用します。
rem は CSS3 の新しい単位で、ルート要素 (通常はドキュメントの HTML 要素) のフォント サイズを定義します。これは新しい単位であるため、すべてのブラウザーでサポートされているわけではありません。 http://caniuse.com/#feat=remを参照してください。したがって、px 値はフォールバックとして提供されます。rem がサポートされている場合はその値が使用され、サポートされていない場合は px 値が使用されます。
CSS の長さの単位の詳細については、https://developer.mozilla.org/en-US/docs/CSS/lengthを参照してください。
簡単な言葉で...
Pxは、IE の代わりにすべてのブラウザーで修正するために使用されます。IE にはブラウザ機能を使用してサイズを変更する機能がないためです。
Em IE でテキストのサイズを変更できないということは、今も続いているフラストレーションです。これを回避するために、em 単位を使用できます。
CSS3 では、「root em」を表す「rem」と呼ばれる新しい単位がいくつか導入されています。em 単位は親の font-size に関連しているため、複合の問題が発生します。rem 単位は、ルート (または html) 要素に相対的です。