自适应网页设计背景图片

我发现StackOverflow上十分感谢提前任何帮助是非常有用的。自适应网页设计背景图片

在http://test2.heyscout.com/，我不知道如何正确设置我的背景图像在我的“英雄格”为响应网页设计。我一直在玩很多设置，但我喜欢它：

保持位置始终如一，没有由于浏览器大小跳跃（例如，在手机上，它得到错位或有空白区域这里不应该有）
“验证任何脱机”虽然我在EM设置不调整，甚至正常
按钮看起来怪怪的移动设备

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

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

2013-04-08 user2090411

[我网站上的东西无法使用。我可以只粘贴一个链接吗？]（http://meta.stackexchange.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link -to-IT） – Antony 2013-04-08 17:55:17

你有没有看着媒体查询？基本上，它们允许您根据浏览器宽度（和高度）设置特定的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-08 18:00:09

为了让背景图片总是充满DIV，使用background-size: cover²，除非你需要支持IE8。

如果您的字体大小不正确的跨PC /平板电脑/掌上看，尝试使用media queries设置字体大小具体决议。

我不知道如何帮助你和你的按钮“找怪”，除了提供丰富的同情。

在未来，尽量保持你的问题更集中。 :)

来源

2013-04-08 18:00:37 mwcz

给

background-size:contain;

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

来源

2013-04-08 18:41:31 Yash

自适应网页设计背景图片

回答

相关问题