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

Question

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

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

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

border-radius: 1.563em;

またはこれ：

border-radius: 25px;

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

Ana · Accepted Answer

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

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

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

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

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

Piccolina · Answer

情報のためだけに、それが役立つ場合は、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>はあなたが定義したサイズです。