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

Question

継承したCSSファイルでこのコードを見つけましたが、意味がわかりません。

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

具体的には、最初の行で何が起こっているのですか？

score 308 · Accepted Answer

これはメディアクエリです。ブラウザが含まれているテストに合格しない限り、内部のCSSが実行されないようにします。

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

@media screen—ブラウザは、自分自身を「画面」カテゴリにあると識別します。これはおおまかに言って、ブラウザが自分自身をデスクトップクラスと見なしていることを意味します。たとえば、古い携帯電話ブラウザ（iPhoneやその他のスマートフォンブラウザは、画面カテゴリに含まれていると認識していることに注意してください）やスクリーンリーダーとは対照的です。ページを印刷するのではなく、画面に表示します。
max-width: 1024px—ブラウザウィンドウ（スクロールバーを含む）の幅が1024ピクセル以下です。（デバイスピクセルではなく、CSSピクセル。）

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

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

これがメディアクエリの仕様です。かなり読みやすいです。

score 55 · Accepted Answer

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

score 10 · Accepted Answer

ページが最大1024ピクセルの幅の解像度で画面にレンダリングされる場合は、次のルールを適用します。

すでにご存知かもしれませんが、実際には、CSSの一部を、ハンドヘルド、スクリーン、プリンターなどのメディアタイプにターゲティングできます。

詳細はこちらをご覧ください。

score 6 · Accepted Answer

私の場合、ブラウザの数が800px少ないときにロゴをWebサイトの中央に配置したかったので、次の@mediaタグを使用してこれを行いました。

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

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

score 5 · Accepted Answer

それがメディアクエリです。CSSルールの一部を、特定の設定の特定のデバイスにのみ適用できます。

score 1 · Accepted Answer

これは、画面サイズが1024の場合、CSSルールの下でのみ適用されることを意味します。

score 1 · Accepted Answer

メディアクエリ条件がtrueの場合、その条件のCSSが機能します。つまり、メディアクエリの条件のピクセルサイズ内のCSSが影響するか、条件が失敗した場合、つまりデバイスの幅がCSSよりも1024pxより大きい場合、CSSは機能しません。メディアクエリの条件がfalseであるためです。

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

score 0 · Accepted Answer

また、「em」と「px」を使用できることにも注意してください。ブログやテキストベースのサイトでは、ブラウザがテキストコンテンツに関連してレイアウトを決定するため、これを使用します。

Wordpress 26では、タグラインをデスクトップだけでなくモバイルにも表示したかったので、これを子テーマのstyle.cssに入れました。

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

score 0 · Accepted Answer

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

例えば：

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

  }

上記のスニペットは、このプログラムを実行するデバイスに600pxまたは600px未満の幅の画面がある場合、この場合、プログラムはこの部分を実行する必要があることを示しています。

9 に答える 9