css - 使用@media 定位计算机屏幕

Question

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

例如，我的视口(viewport)元标记设置为静态 960 像素(我知道不推荐这样做)，因此手机将无法看到主体，因为它们的宽度会自动缩放到 960 像素。

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

Answer 1

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

你是这个意思吗？

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

如果您调整浏览器的大小，正文背景图片将会消失。