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

245

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

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

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

css  media-queries 
— ヤリン
ソース

回答:

306

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

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

  1. @media screen—ブラウザは、それ自体を「画面」カテゴリにあるものとして識別します。例えばとは対照的に、 -これは大体、ブラウザ自体デスクトップクラスとみなし意味の古い携帯電話のブラウザ（iPhone、および他のスマートフォンのブラウザでは、そのノートん画面のカテゴリにあるものとして自分自身を識別）、またはスクリーンリーダー-そしてそれは表示だとページを印刷するのではなく、画面上に表示します。

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

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

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

メディアクエリの仕様は次のとおりです。かなり読みやすくなっています。

— ポール・D・ウェイト
ソース
画面幅が1200pxを超える場合、@ media screenでの指定方法
— sanoj lawrence
2
max-widthの代わりに（min-width：1200px）を使用するか、メディアクエリなしで通常のCSSとして使用し、より小さなデバイスに移動するときに「max-width」を使用してこれを上書きできます
— MintWelsh
ビューポートのサイズを変更しているときに、デスクトップのみ（モバイルではない）でスタイル設定を行う方法はありますか？したがって、手動でブラウザのサイズを「max-width 720px wide」に変更した場合、モバイルではなくデスクトップ上でユーザーを検出するメディアステートメントが使用され、たとえば720px未満になりましたか？
— ワーフデール2015
@ JordanC26：質問をしているように見えます。そのためには、画面の右上隅にある[質問する]ボタンが必要です。ただし、それを使用する前に、「デスクトップ」と「モバイル」の意味を定義することをお勧めします。Microsoft Surfaceはモバイルですか、それともデスクトップですか？どうして？まだ発明されていない将来のデバイスはどうですか？
— ポールD.ウェイト2015
10

それは言う：ページが最大幅1024ピクセルの解像度で画面に表示される場合、次のルールを適用します。

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

見ているこちらの詳細については。..

— ロレンゾ
ソース
3
私は彼がそれを知っているとは思いません。
— jcolebrand 2010年
6

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

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

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

— イェハニー
ソース
1

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

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

— Anup
ソース
0

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

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

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

他のいくつかのコードを実行するために、指定された機能をターゲットにしています...

例えば：

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

  }

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

— シャヒン・ガセミ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.