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

Question

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

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

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

border-radius: 1.563em;

またはこれ：

border-radius: 25px;

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

score 26 · Accepted Answer

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

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

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

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

この記事もチェックしてください。

score 8 · Accepted 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>があなたのサイズになります。定義。

2 に答える 2