[100連続学習]TILday 7
いつ使いますか。
注:ブログhttp://triki.net/prgm/3250
今日は既存のプロジェクトをやらずに、新しいサイト(1ページ)を担当することにしました!
特別な機能もないので最初から.
基本設定+反応型publishing
私はpublishingをする時に大きさの単位をpxに変えることに慣れたので、今回変えたいのは基本的に可変単位rem,emです.
でも家に帰ってみる!かばう
%*またはv*を使用して、箱のサイズを調整できます.
フォントサイズの場合、rem emの2つで使用することを考慮します.
呜呜...
今日は家に帰ってお会いできてよかったです.
全部できていて、確認したら怖いです.
rem
remの概念は,標準値を指定倍数表現の大きさに変換することである.ここで、データム値は、トップレベル要素(通常htmlタグ)で指定されたfont-size値です.
例えば、htmlタグのfont-size値が16 pxの場合、2 remは32 pxを表す.html { font-size: 16px; }
div {
font-size: 1.5rem; /* 24px */
margin: 2rem /* 32px */
padding: 1.25rem /* 20px */
}
em
Emの概念は,標準値を指定倍数表現の大きさに変換することである.ここで、条件値は、現在のスタイル設定要素のfont-size値です.
たとえば、現在の要素のfont-size値が16 pxの場合、2 emは32 pxを表します.div { font-size: 16px; }
div {
font-size: 1.5em; /* 24px */
margin: 2em /* 32px */
padding: 1.25em /* 20px */
}
差異
簡単に言えばremとemの標準値は違います.remはトップタグのfont-size値に基づいており、emは現在の要素のfont-size値に基づいている.emでスタイルを指定した要素に個別のfont-size値を指定しない場合、その要素は親要素からfont-size値を継承し、emはその継承値に基づいています.
Reference
この問題について([100連続学習]TILday 7), 我々は、より多くの情報をここで見つけました
https://velog.io/@normalduck/100연속공부하기-TIL-day7-u656qja7
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
html { font-size: 16px; }
div {
font-size: 1.5rem; /* 24px */
margin: 2rem /* 32px */
padding: 1.25rem /* 20px */
}
div { font-size: 16px; }
div {
font-size: 1.5em; /* 24px */
margin: 2em /* 32px */
padding: 1.25em /* 20px */
}
Reference
この問題について([100連続学習]TILday 7), 我々は、より多くの情報をここで見つけました https://velog.io/@normalduck/100연속공부하기-TIL-day7-u656qja7テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol