确保网页在调整大小时看起来相同答案

【问题标题】：Making sure a webpage looks the same when resized确保网页在调整大小时看起来相同
【发布时间】：2011-06-07 09:42:06
【问题描述】：

我找不到以前的帖子，如果这是一个 uber-n00b 问题，我深表歉意。

我正在开发我的第一个练习网站（现在只是 XHTML 和 CSS/3 阶段）。我想测试页面以确保当我减小浏览器窗口的大小时，一切看起来仍然一样。当我这样做时，我的导航列与页面的一部分重叠，并且我嵌入到我的 h1 标题中的背景图像不会一直向右填充所有 x 轴。

我做错了什么，我该如何正确地解决这个问题（网络标准）？

P.S...这是代码

h1 { 
  font-size: x-large; 
  color: white; 
  padding-top: 2em; 
  padding-bottom: .2em; 
  padding-left: .4em; 
  margin: 0; 
  background: navy url(backgrounds/header-bg.jpg) repeat-y right; 
} 

#navigation { 
  width: 180px; 
  height: 484px; 
  background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat; 
}

【问题讨论】：

你能把有问题的代码贴出来吗，很多不同的事情都可能导致这个。

标签： css xhtml web-standards

【解决方案1】：

有几种策略。这真的是一门艺术，它有点太复杂了，无法在这里完全回答。这是网页设计师多年来一直在处理的问题，您将开发自己的风格和策略，但在网络上可以找到很好的建议和最佳实践。

我会从这个搜索开始：

http://www.bing.com/search?q=web+design+gracefully++resize&src=IE-SearchBox&FORM=IE8SRC

这是该搜索的第一个真正好的结果：http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript

但也有其他好的结果。

【讨论】：

【解决方案2】：

尝试为主容器或主体本身提供固定宽度。

body{
    width:1000px;
}

如果您发布您当前的代码，我们可能会为您提供更好的解决方案。

【讨论】：

【解决方案3】：

嗯，这将是一个评论，但我只是继续......

导航栏最有可能重叠，因为它是用固定宽度（px 或 em（为此目的而固定））定义的，而不是像百分比这样的流体单位。尊重 David Stratton（他是对的，这是一门需要深入回答的艺术），请尝试在适当的时候使用百分比来构建您的布局，以使页面能够很好地缩放。

响应固定外部容器宽度的想法，这也是一种可能性，但如果用户的屏幕非常小或大或非常高分辨率或低分辨率。

尝试使用流畅的页面布局网页设计进行谷歌搜索

【讨论】：