Bootstrap:使CSS规则仅适用于桌面版本
问题描述:
我使用引导来创建应用程序的桌面和移动版本。Bootstrap:使CSS规则仅适用于桌面版本
我想让桌面版在左上角有一个小图像,几乎就像水印一样,不会影响任何其他元素的定位,所以我在背景图上使用了主体
body
{
background-image: url("../image/logo.png");
background-repeat: no-repeat;
}
但是,我不希望这显示在移动版本上。
如何停止影响移动版本的CSS规则?
答
你可能会想使用一个类对身体标记:
body.desktop
{
background-image: url("../image/logo.png");
background-repeat: no-repeat;
}
<body class="desktop">
...
</body>
你也可以使用media queries删除图像的屏幕尺寸小。将需要在这种情况下,没有体类:
@media only screen and (max-device-width: 480px) {
body {background-image: none;}
}
我甚至不知道为什么你会在这里推荐一类,你怎么能指望得到应用这个班?在使用媒体查询时,最好在'(min-width:X)'时应用bg,而不是全局应用它,并在事后将其删除。这样少用CSS。很少有很好的理由在'min-width'上使用'min-device-width'(这与max-*相同)。 – cimmanon 2013-03-12 18:40:24
我不明白你的身体课的问题。至于媒体查询,这是一个可以修改的通用示例。随意编辑。 – isherwood 2013-03-12 18:42:09
谢谢你们,这个伎俩。 '@media唯一的屏幕和(最小宽度:768px){ 机身{\t background-image:url(“../ image/logo.png”); background-repeat:no-repeat; } }' – user2162295 2013-03-12 18:51:17