反应 - 如何在平板电脑上只显示一半的背景图像，在手机上显示 1/4

Question

Goal我有一个背景图像，在计算机或笔记本电脑浏览器上，我希望它显示 100% 的宽度，但我只希望它在平板电脑上垂直剪切它时显示图像的 1/2，如果是手机，我希望它显示图像的 1/4 如果你垂直剪切它。

我尝试过什么尝试在 CSS 中使用剪辑路径，但这使其启用水平滚动，我不想要。

在浏览器上应该看起来像这样

在平板电脑上

在电话上

在平板电脑和手机上，图像的其余部分不应通过滚动可见。它应该只允许垂直滚动，这只是背景。

Answer 1

可以使用媒体查询和 background-size 属性来实现此目的。

/* Default (mobile) */
body {
  background: url(https://i.stack.imgur.com/np7c0.png) no-repeat;
  background-size: 400%;
}
/* Tablet and up */
@media only screen and (min-width: 600px) {
  body {
    background-size: 200%;
  }
}
/* Desktop and up */
@media only screen and (min-width: 768px) {
  body {
    background-size: 100%;
  }
}

下面是一个演示：https://jsfiddle.net/zxqcgkLp/

---

注意：您可能需要使用断点，具体取决于您的特定需求。以下是来自 CSS Tricks 的有用指南，其中显示了常见的设备断点：

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/