web-dev-qa-db-ja.com

CSS3メディアクエリでボディ幅を自動的にデバイス幅に等しくする方法は？

現在、モバイル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" />
csscss3media-queries
17
chaonextdoor

width: auto;を使用するだけです

width: 100%;とwidth: auto;の違いは、100％の外側の幅が100% + padding-left + padding-right、内側の100%であることです。 width: autoの外側の幅は100%であり、displayがblockであり、floatが設定されていない場合にのみ、内側の幅は100% - padding-left - padding-rightです。 （およびクリアなしのフロート要素は前にありません）。

17
Boris Šuška

使用することもできます

width: 100vw;

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

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

35
sh3nan1gans