4

垂直方向の CSS 宣言でのパーセンテージ値の適切な使用法と推奨される使用法は何ですか?

言い換えれば、レスポンシブ デザインの下で、% が em よりも有益である何かを見落としていませんか?


ほとんどの状況では (すべての辺を等しくしたい場合、クレジットを除く)、よりも のem方が適しているように思われるため%、

CSS の要素のパディング、マージン、またはボーダーの水平方向の値にパーセンテージを使用することは、特にレスポンシブ Web デザインではかなり標準的です。たとえば、margin-left: 7.2%とpadding: 0 5%. これも理にかなっています。画面が広くなればなるほど、それに比例してスペースが増えます。

垂直方向の値についても同じことができます:

margin-top: 5%;
padding: 10% 0;
border: 1% 0 2% 0;

予想どおり、ビューポートの幅を増やすと、対応する垂直方向のスペースが増えます。

ただし、私が遭遇したケースでは、少し奇妙に見える可能性があります — デザインに合わない. 値を使用した方がよいように思われemます*。しかし、一方で、パーセンテージを使用するとどのような場合に役立つのでしょうか?


※画面幅では増えませんが、ページのフォントサイズに応じて増えます。

4

3 に答える 3

2

この質問に対する正しい答えも間違った答えもないと思います。それは本当にあなたのデザインに依存します。

お気づきのように、％値は、マージンとパディングの垂直ベースのプロパティであっても、ドキュメントの幅に相対的です。したがって、デザインに均一なパディングが必要な場合は、すべてのラウンドの％値が最適です。

ただし、デザインがコンテンツ指向であり、レスポンシブデザインの水平方向のプロパティで％値を使用している場合は、垂直方向のプロパティに％が最適ではない可能性があります。padding-topたとえば、を1行のテキストの高さに正確に設定したい場合があります。したがって、を使用しますems。

しかし、私は逸脱します。それは本当にあなたのデザインと個人的な好みに依存します。

于 2012-12-03T15:43:08.840 に答える
2

はい、他のcssの練習と同じように、状況によって異なります。

画面の高さの100％を使用するコンテナdivがあり、divの上部に表示するヘッダーがあるとします。あなたはあなたのヘッダーで言うことができmargin-top: 15pxます、それはうまくいきます、しかしそれから私が来て私の電話でそれを見るならばそれは非常に押しつぶされたように見えます。

したがって、代わりにmargin-top: 10%、どの画面にアクセスしても、ヘッダーにサイトを表示すると、常にdivの上部から10％になると言います。つまり、レイアウトの相対的な流れは常に同じになります。

一般的なルールは次のとおりです。記述できる有効なcssには、設計目標を達成するための最良の方法となるユースケースがあります。「負のマージンを使用しないでください」または「常に絶対的なポジショニングを避けてください」または彼らが投げかける他のがらくたのいずれかを言う人を忘れてください。

于 2012-12-03T15:43:57.280 に答える