過去の記事をみていて、なんか画像がボケてるなぁと思っていたのですが、ちょっと調べてみたらなぜか画像が引き伸ばされているじゃないですか。もしかして「Twenty Thirteen」からのCSSの仕様が変わっている？
旧テーマ「Twenty Twelve」のときに使われていたスタイルシートは特徴があって幅や高さを指定するにはpxとremを同時に記入していました。
これによりレスポンシブデザインを実現していたと思います。
ところが「Twenty Thirteen」のスタイルシートではremの指定がないじゃないですか。
試しにカスタマイズしたstyle.cssのremをコメントアウトしてみました。
おお、レスポンシブデザインになってるじゃない！
ブラウザのウィンドウサイズを変えるとちゃんと画像も小さくなります。
うーん、どういう技をつかっているのだろう？
ということで面倒な計算が必要だったrem指定が必要なくなり便利になりました！
rembaseという指数があり下記の計算式によってremを算出していたのです。
rembase = 14
rem = px / rembase
おや、もしかして「Twenty Thirteen」ではrembaseが変わったから画像サイズが大きくなってたりして？ とおもいちょっと試してみたところrembaseが「16」でぴったりでした！
なるほどrembaseが変わっていたからか・・・
でも、remをわざわざ指定しなくても問題ないのでpxだけでいいですね。
コメント