css - Bootstrap：使 CSS 规则仅适用于桌面版本

Question

我正在使用引导程序创建应用程序的桌面和移动版本。

我希望桌面版在左上角有一个小图像，几乎像水印一样，不会影响任何其他元素的定位，所以我在 body 上使用了 background-image

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;}
}

1 回答 1