ホーム >  WEB全般 >  emはレスポンシブで使うべき単位


Posted:2015/01/02 9:00:57 AM|Category : WEB全般

emはレスポンシブで使うべき単位

 厳密にレスポンシブなウェブサイトにするのであれば、CSSでem(エム)を使用しましょう。
emは、フォントサイズをベースにしたサイズです。
フォントサイズを変更すると、emでした要素も相対的にサイズ変更します。
以下のサイトでは、pxとemの相互変換をしてくれます。
PXtoEM
px
ピクセル。絶対単値。環境によって変化しない。
em
エム。文字サイズをベースにした相対値。
bodyタグで「font-size: 100%;」を指定すると1em=16pxになる。
font-sizeはemで指定するのが一般的。

幅やpaddingをemで指定し、メディアクエリで親要素のフォントサイズを指定します。
すると、特定画面でのレイアウトを自動的にプロポーショナル(最適な幅)に調整してくれます。

コード

 HTML5 Boilerplateでは、以下のように指定しています。

html { font-size: 100%; }
body { font-size: 1em; }

@media only screen and (min-width: 35em) {
}

解説

 htmlに「font-size: 100%;」としてあるのは、IE6、7でのバグを回避するためです。
IE6、7で、bodyタグにem単位を使ってフォントサイズを指定すると不具合が生じます。
多くのブラウザでは、16pxがデフォルトのフォントサイズです。
35emは、「35em×16px=560px」により560px相当の幅です。


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告