Question

我发现StackOverflow非常有用，所以感谢您提前提供任何帮助。

在http://test2.heyscout.com/上，我想知道如何在我的“英雄div”中正确设置我的背景图像，以进行响应式网页设计。我一直在玩很多设置，但我希望它能够：

始终保持原位而不会四处跳跃（例如，在手机上，它会出现错位或存在不应该出现的空白区域）
即使我在em
该按钮在移动设备上看起来很奇怪

保持“英雄div”的最佳做法是什么？我猜测它必须用最小高度做一些事情或者修复实际图像的尺寸。我应该以百分比而不是像素来设置英雄div的高度吗？

关于如何保持我的“三个月div”的任何建议都能很好地填满页面的底部1/3，这将是很好的 - 我想当浏览器的高度大于预期时，它看起来奇怪。我已经读过，最好保持RWD的高度属性，但我想知道是否有任何技巧来确保它正确调整大小。

Answer 1

您是否查看了媒体查询？基本上，它们允许您根据浏览器宽度（和高度）设置特定的CSS。这将允许您控制页面在特定浏览器大小上的显示方式。

示例 - 不同宽度的CSS：

@media screen and (max-width: 600px) {
  /* add some CSS here for 600px maximum width*/
}

@media screen and (max-width: 960px) {
  /* add some CSS here for 960px maximum width*/
}

Answer 2

要使背景图片始终填充div，请使用background-size: cover ²，除非您需要支持IE8。

如果您的字体大小在PC /平板电脑/掌上电脑中看起来不正确，请尝试使用media queries设置特定分辨率的字体大小。

我不确定如何帮助你“看起来很奇怪”按钮，除了提供大量的同情。

将来，请尽量使您的问题更加集中。：）

Answer 3

给

background-size:contain;

这可能会解决您的问题，因为它会通过包含自动调整大小！

响应式背景图像的网页设计

3 个答案: