0

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

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

  • 由于浏览器的大小，始终保持在原位而不会跳来跳去（例如，在手机上，它会错位或不应该有空白）
  • 即使我在 em 中设置了“离线验证任何人”，它也无法正确调整大小
  • 该按钮在移动设备上看起来很奇怪

控制“英雄 div”的最佳做法是什么？我推测它必须对最小高度或固定实际图像的尺寸做一些事情。我应该以百分比而不是像素设置英雄 div 的高度吗？

此外，任何关于如何让我的“三个月 div”始终很好地填满页面底部 1/3 的建议都会很棒——我想当浏览器的高度大于预期时，它看起来会很奇怪。我读过最好单独为 RWD 保留 height 属性，但我想知道是否有任何技巧可以确保它正确调整大小。

4

3 回答 3

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*/
}
于 2013-04-08T18:00:09.763 回答
1

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

如果您的字体大小在 pc/tablet/handheld 上看起来不正确，请尝试使用媒体查询来设置特定分辨率的字体大小。

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

将来，请尽量让您的问题更加集中。:)

于 2013-04-08T18:00:37.610 回答
0

给

background-size:contain;

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

于 2013-04-08T18:41:31.190 回答