背景渐变100%高度，不适用于移动设备

Question

我有 100vh 的内耳渐变背景（我也尝试过 100%，但结果相同），我还有“背景附件：固定；”。 这适用于笔记本电脑和台式电脑，但不适用于移动设备。在移动设备上，渐变遍布整个页面，而不仅仅是可见屏幕。

我的 CSS 是：

body{
  background: rgb(32, 149, 50);
  background: linear-gradient(165deg, rgba(32, 149, 50, 1) 0%, rgba(32, 149, 50, 1) 39%, rgba(149, 150, 150, 1) 48%, rgba(183, 184, 184, 1) 65%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 1) 100vh);
  background-attachment: fixed;
}

这就是它在笔记本电脑上的工作方式，工作正常 - 当您向下滚动时，有一个蓝色图像会逐渐变得不透明，视频中间显示页面底部的部分是关键部分。 笔记本电脑视图

这就是它在手机上的工作原理，这不起作用 - 图像仍然存在。 手机查看

Answer 1

确保线性渐变的一致渲染，尤其是在不同的视口尺寸上，需要战略处理。以下是如何改进您的方法：

使用媒体查询： 媒体查询帮助我们调整背景渐变，使其在大屏幕（如笔记本电脑）和小屏幕（如手机）上看起来都不错。

/* For bigger screens */
@media (min-width: 768px) {
  body {
    background: rgb(32, 149, 50);
    background: linear-gradient(165deg, rgba(32, 149, 50, 1) 0%, rgba(32, 149, 50, 1) 39%, rgba(149, 150, 150, 1) 48%, rgba(183, 184, 184, 1) 65%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 1) 100vh);
    background-attachment: fixed;
  }
}

/* For smaller screens */
@media (max-width: 767px) {
  body {
    background: rgb(32, 149, 50);
    background: linear-gradient(165deg, rgba(32, 149, 50, 1) 0%, rgba(32, 149, 50, 1) 39%, rgba(149, 150, 150, 1) 48%, rgba(183, 184, 184, 1) 65%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 1));
  }
}

通过媒体查询，我们的背景渐变在任何设备上都保持出色！