web-dev-qa-db-ja.com

レスポンシブレイアウト-PX、EM、または%?

私はレスポンシブページレイアウトを構築していて、これまでのところうまく機能していますが、質問があります。

Em、px、または%を使用する必要がありますか?

たとえば、要素に境界線の半径を適用したいとします。このコードを使用する必要があります:

border-radius: 1.563em;

またはこれ:

border-radius: 25px;

同様のプロパティにemsを使用する必要がありますか、それともpxを使用する必要がありますか?

16
L84

通常、レスポンシブレイアウトにはpxを使用しないでください。

pxベースのメディアクエリを使用する場合、 ユーザーがズームするとレイアウトががらくたに見える可能性があります 。そして残念ながら、私もその間違いを犯したので、私はすべてをよく知っています。

border-radiusの例に関して、font-sizeを増やすと、2つが実際に異なって見えることに気付くかもしれません デモ 。 1番目と3番目はborder-radiusにpxを使用し、2番目と4番目はemを使用します。

ただし、例外があり、ズームで何かが正しく感じられない場合(たとえば、誇張されているように見えるbox-shadow)、pxでも試してみてください。

この記事 も確認してください。

26
Ana

情報のためだけに、それが役立つ場合は、remを使用することができます。 emで「カスケードサイズ」の問題を解決します。設定した場合

body { font-size :62.5 %; } /* Trick to have 1em =10px */

li {font-size:1.4em; }

きみの <li>は14pxになりますが、リストにリストがある場合は、第2レベル<li>は20pxになり、3番目のレベルは27pxなどになります。rem(「ルートem」を意味します)を使用すると、すべて<li>はあなたが定義したサイズです。

詳細: http://snook.ca/archives/html_and_css/font-size-with-rem

および http://www.pompage.net/traduction/dimensionner-ses-fontes-avec-rem (フランス語)

8
Piccolina