CSSの@media属性の使い方

css @media 属性の定義と使用法

@media クエリを使用すると、さまざまなメディア タイプにさまざまなスタイルを定義できます。

@media は、さまざまな画面サイズに応じてさまざまなスタイルを設定できます。特に応答性の高いページを設定する必要がある場合、@media は非常に便利です。

ブラウザのサイズをリセットすると、ブラウザの幅と高さに基づいてページも再レンダリングされます。

例

ドキュメントの幅が 300 ピクセル未満の場合は、背景色 (background-color) を変更します

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

構文

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

さまざまなメディアに異なるスタイルシートを使用することもできます

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

メディア タイプ

#

以上がCSSの@media属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。