35

レスポンシブ Web サイトを構築していますが、どのユニットを使用すればよいでしょうか? 測定にピクセル (px) を使用している多くのサイトを見てきましたが、パーセント (%) を使用しているサイトもいくつか見てきました。レスポンシブ デザインを行うための好ましい (または正しい) 方法はありますか?

パーセントは計算が難しくなり、幅/マージンなどを設定するときに 2.754% などの値になってしまうため、使いにくいことがわかりました。ピクセルの方が簡単に思えます。単純な加算と減算ですが、私は「将来の保証」などではなく、ユーザーがブラウザウィンドウをズームインすると適切にスケーリングされないことを読んだことがあります。それはまだ本当ですか？

経験や専門知識があれば教えてください！皆さんの意見を聞きたいです！

ありがとう！

4

4 に答える 4

48

ボックスのサイズなどのレイアウトタイプの場合%は、特定のブレークポイント ( ) で互いに積み重なる親のパーセンテージとしてサイズ設定された複数の列があるため、使用する必要がありますwidth:100%。他のユニットでは、スペースの 100% を埋めることはできません%。

パディング/マージンの使用ではem、通常、テキストのサイズに対して要素の間隔を空けたいと思うでしょう。('M' 文字のwith em) を使用すると、ここで約 1 文字の間隔が必要であると簡単に言えます。

またはを使用できる境界線については、違いがあります。すべてのデバイスで境界線を 1 ピクセル幅に見せたい場合は、 を使用します。すべてのデバイスで 1 ピクセルではない場合がありますが、高密度ディスプレイはたとえば 1 ピクセルに変換されます。境界線をフォントに基づくサイズにしたい場合は、 を使用します。pxem1px1px2pxem

フォントの使用em(または%) の場合、 の使用は親emから子へと引き継がれpxます。

于 2013-04-06T12:41:08.390 に答える
11

もちろん、パーセンテージを使用する必要があります。ただしmin-height、、、、CSS キーを使用max-heightしmin-widthます。max-width

次世代のために

vwとvh。vw はウィンドウの幅の 1/100 で、vh はウィンドウの高さの 1/100 です。応答性のために、それらは新しいユニットになります。

于 2013-04-06T12:40:02.960 に答える
5

min-width および max-width とともにパーセンテージをピクセル単位で使用します。これにより、パーセンテージによって div が小さすぎたり大きすぎたりするのを防ぎます。例えば

div {
    width:100%; //full width of browser
    max-width: 960px; //this means it will be 100% of the browser until 960px then it will stop expanding
}
于 2013-04-06T12:37:13.360 に答える