21

現在、モバイル Web サイトを作成しており、CSS3 メディア クエリを使用してさまざまなデバイスをターゲットにしようとしています。私のコードの一部は次のとおりです。

@media screen and (max-width:320px) {
body {
    width: 320px;
}
/* some other style */  
}

ご覧のとおり、ボディの幅を明示的に設定して、通常の CSS でデスクトップ用に設定した幅 (920px) が表示されないようにする必要があります。本体の幅をデバイスの幅に自動的に設定できる方法があるかどうか疑問に思っており、新しい を作成するたびにこれを手動で設定する必要はありません@media。

ちなみに、headタグ内に次のコードも追加します。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
4

2 に答える 2

40

使用することもできます

width: 100vw;

これにより、要素がビューポートの幅の 100% に設定されます。追加する前に、ブラウザの互換性を確認することをお勧めします: http://caniuse.com/#search=vw

ビューポートのサイズ設定の詳細: https://css-tricks.com/viewport-sized-typography/

于 2015-05-04T21:06:15.507 に答える
26

使うだけwidth: auto;

width: 100%;との違いは、 width: auto;100%のアウター幅が100% + padding-left + padding-right、インナー幅であるということ100%です。の外側の幅はwidth: autois100%で、内側の幅はisおよび noが設定され100% - padding-left - padding-rightている場合のみです(また、clear is before のない浮動要素はありません)。displayblockfloat

于 2013-02-26T17:55:03.917 に答える