web-dev-qa-db-ja.com

CSSで@media screenと（max-width：1024px）はどういう意味ですか？

継承したCSSファイルでこのコードを見つけましたが、その意味から理解することはできません。

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; }
}

具体的には、最初の行に何が起きているのでしょうか。

csscss3media-queries
242
Yarin

それはメディアの質問です。ブラウザに含まれるテストに合格しない限り、内部のCSSが実行されるのを防ぎます。

このメディアクエリのテストは次のとおりです。

  1. @media screen - ブラウザは自分自身を「画面」カテゴリに属する​​ものとして識別します。これはおおまかに言ってブラウザがそれ自身をデスクトップクラスとみなすことを意味します。 より古い 携帯電話のブラウザ（iPhoneや他のスマートフォンのブラウザ、 do が画面のカテゴリに属していることを示す）、またはスクリーンリーダーを表示している - それを印刷するのではなく - スクリーン。

  2. max-width: 1024px - ブラウザウィンドウ（スクロールバーを含む）の幅は1024ピクセル以下です。 （ デバイスピクセルではなくCSSピクセル ）

2番目のテストは、これがCSSをiPad、iPhone、および類似のデバイスに限定することを意図していることを示唆しています（一部の古いブラウザはメディアクエリでmax-widthをサポートしないため、多くのデスクトップブラウザは1024ピクセルより広く実行されます）。

ただし、max-widthメディアクエリをサポートするブラウザでは、幅1024ピクセル未満のデスクトップブラウザウィンドウにも適用されます。

これがMedia Queriesの仕様です。かなり読みやすくなっています。

305
Paul D. Waite

それはそこで定義されたスタイルをスクリーンに限定し（例えば、印刷や他のメディアではない）、さらに範囲を1024px以下の幅のビューポートに限定します。

http://www.css3.info/preview/media-queries/ /

55
Chris Bentley

ページの幅が最大1024ピクセルの解像度で画面に表示される場合は、次の規則を適用してください。

すでにご存知かもしれませんが、CSSをターゲットにして、ハンドヘルド、スクリーン、プリンタなどのメディアタイプにすることができます。

ご覧ください ここ 詳細は..

10
Lorenzo

私の場合は、ブラウザの800px以下のときにロゴをWebサイトの中央に配置したい場合は、@mediaタグを使用してこれを行いました。

@media screen and (max-width: 800px) {
  #logo {
    float: none;
    margin: 0;
    text-align: center;
    display: block;
    width: auto;
  }
}

それは私のために働いた、誰かがこの解決策が役に立つと思うことを願っています。 :)詳細については this を参照してください。

5
yehanny

それは メディアクエリ です。それは特定の設定の特定のデバイスにだけCSSルールの一部を適用することを可能にします。

5
Crozin

つまり、画面サイズが1024の場合は、CSSルールの下でのみ適用されます。

1
Kumar Nitesh

メディアクエリーの条件が真であれば、その条件のCSSは機能します。これは、メディアクエリの条件ピクセルサイズ内のCSSが有効になることを意味します。そうでない場合は、デバイスの幅がCSSより1024pxを超えると機能しなくなることを意味します。

max-widthは、その幅までの最大CSS制限です。

1
Anup

また、 'em'や 'px'を使用することもできます。そうすると、ブラウザがテキストの内容に関連してレイアウトを決定するため、ブログやテキストベースのサイトで使用できます。

WordpressのTwentysixteenでは、私のキャッチフレーズをデスクトップだけでなくモバイルにも表示したいので、これを私の子供のテーマstyle.cssに入れました。

@media screen and (max-width:59em){
    p.site-description {
        display:    block;
    }
}
0
MattB

それはいくつかの他のコードを実行するためにいくつかの指定された機能を対象としています...

例えば：

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;

  }

上記のスニペットは、このプログラムを実行するデバイスが600pxまたは600px幅以下のスクリーンを持っているかどうかを言います、この場合私たちのプログラムはこの部分を実行しなければなりません。

0
shahin gh