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

厳密にレスポンシブなウェブサイトにするのであれば、CSSでem（エム）を使用しましょう。

em単位

emは、フォントサイズをベースにしたサイズです。フォントサイズを変更すると、emでした要素も相対的にサイズ変更します。以下のサイトでは、pxとemの相互変換をしてくれます。

→PXtoEM

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相当の幅です。