単位:rem(CSS3)

rem

WordPressのテーマ”twentytwelve”はHTML5・CSS3
このブログもこの記事を書いてる時点ではそれ

cssみててremの単位を利用しているが、小数点以下がめっちゃながっ・・・

remって?
「rem」とは、「root」+「em」を省略したもののよう。
相対的にサイズが指定できるのが魅力。

最初、この小数点の算出方法がわからずめちゃぐぐったけど・・
style.css 17行目~解説ついてた


$rembase: 14;
$line-height: 24;

これこれ。
px / 変数 = rem

例えば。


font-size: 11px;
font-size: 0.785714286rem;

計算すると、11px/14=0.785714286rem

だから長いんだね。うん。何回みてもながぃぃぃぃ
今後も、電卓片手になんですかね・・・
自動で計算式をCSSにいれれるんだっけか??

そして、IE8以下がrem対応してないから
そのせいでさらに、この長いrem記述と一緒にpx記述もせなあかん。
さっきの例ででてきたように記述。


font-size: 11px;
font-size: 0.785714286rem;

とても参考・勉強にさせていただきました。
http://www.tam-tam.co.jp/tipsnote/html_css/post1466.html


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">