css - 使用响应式设计的带有内容的背景图像

Question

我正试图在响应式设计中了解背景图片。在这个示例页面 ( http://test.scoe.net/rfox/usalResponsive6/indexTeacher5.html ) 中，我有一张大照片，上面有一些文字和几个按钮。我非常小心地在特定窗口宽度下定位和调整文本和按钮的大小:全屏、1024 像素、768 像素、640 像素、480 像素和 320 像素。在这些宽度下，布局看起来相当不错。事情误入歧途的是介于两者之间的尺寸。在较大的尺寸下看起来还不错，但是一旦我将浏览器窗口拖动得更小，大约 760 像素，图像本身就开始缩放，并且我在它和它下面的下一个元素之间出现了很大的差距。有什么建议可以让它在不同尺寸的寡妇身上看起来都不错吗？

Answer 1

这是一个好的开始。

问题是随着视口(viewport)变小，分配给文本的空间也越来越小。在您的示例链接中，看到英雄在 480 像素以下，文本只有 ~165 像素的宽度可以使用，因为您使用的是百分比，所以它开始看起来很尴尬。

我建议将背景图像换成另一个可以为文本容器留出更多空间的图像。无论如何，背景图像都充当上下文信息，您的文字才是您的真实内容。

对于任何低于 480 像素的内容，您的文本容器实际上应该几乎是 100%。有关可能与您的相似的示例，请参阅 https://fi.google.com/signup他们的初始段落如何仅占据左侧，但随着您向下缩放，文本容器会跨越。

在您的代码中:

@media only screen and (max-width: 479px) {
    .zTchrBlurb-xs visible-xs {
        width: 90%;
    }
}