css - Bootstrap: CSS ルールをデスクトップバージョンにのみ適用する

Question

ブートストラップを使用して、アプリのデスクトップバージョンとモバイルバージョンを作成しています。

デスクトップバージョンでは、他の要素の配置に影響を与えない透かしのような小さな画像を左上隅に配置したいので、本文に背景画像を使用しました

body
{
    background-image: url("../image/logo.png");
    background-repeat: no-repeat;
}

ただし、これをモバイル版に表示したくありません。

この CSS ルールがモバイル版に影響を与えるのを止めるにはどうすればよいですか?

score 1 · Accepted Answer

body タグでクラスを使用することをお勧めします。

body.desktop
{
    background-image: url("../image/logo.png");
    background-repeat: no-repeat;
}

<body class="desktop">
...
</body>

メディアクエリを使用して、小さな画面サイズの画像を削除することもできます。この場合、body クラスは必要ありません。

@media only screen and (max-device-width: 480px) {
    body {background-image: none;}
}

css - Bootstrap: CSS ルールをデスクトップ バージョンにのみ適用する