使用@media定位计算机屏幕

Question

我有一个网站。内容设置为960px宽，比这更宽的设备可以看到纯色主体元素。我正在尝试为该主体添加背景图像，但我只希望它加载到可以看到正文的设备上，以便其他设备不需要浪费时间加载它，如果它们不能看到它。

例如，我的视口元标记设置为静态960px（我知道不推荐），因此手机无法看到正文，因为它们会自动缩放到960像素宽

如何使用CSS中的@media，仅在宽度超过960px的设备上显示背景图像？

Answer 1

如何使用CSS中的@media，仅在宽度超过960px的设备上显示背景图像？

你是说这个吗？

body{
  background:url('http://mobilemarketingwatch.com/wp-content/uploads/2016/01/Is-Google-Searching-for-the-Next-Big-Thing1.jpg');
}


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

DEMO

如果你调整浏览器的大小，身体背景图像就会消失。