确保调整大小后网页看起来相同
我找不到之前的帖子，如果这是一个 uber-n00b 问题，我深表歉意。
我正在开发我的第一个练习网站（现在只有 XHTML 和 CSS/3 阶段）。我想测试该页面，以确保当我缩小浏览器窗口的大小时，一切看起来仍然相同。当我这样做时，我的导航列重叠了页面的一部分，并且我嵌入到 h1 标题中的背景图像没有一直向右填充所有 x 轴。
我做错了什么，如何正确解决这个问题（网络标准）？
PS..这是代码
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;
}
I couldn't find a previous post for this, and I apologize if this is an uber-n00b question.
I am working on my first practice site (just XHTML and CSS/3 stages right now). I wanted to test the page to make sure that when I reduce the size of the browser window everything still looks the same. When I did that, my navigation column overlapped part of the page and the background image I have embedded in my h1 header doesn't fill all the x-axis all the way to the right.
What did I do wrong, and how can I fix this the right (web standards)?
P.S...Here's the code
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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
有几种策略。这确实是一门艺术，而且有点太复杂了，无法在这里得到完整的回答。这是网页设计师多年来一直在处理的问题，您将制定自己的风格和策略，但网络上可以找到很好的建议和最佳实践。
我将从以下搜索开始：
http://www.bing.com/search?q=web+design+graceously++resize&src=IE-SearchBox&FORM=IE8SRC
这是该搜索的第一个真正好的结果：< a href="http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript" rel="nofollow">http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript
但还有其他好的结果。
There are several strategies. it's really an art and it's a bit too involved to be answered fully here. It's something web designers have been dealing with for years, and you'll develop your own style and strategy, but there are good recommendations and best practices available on the web to find.
I'd start with this search:
http://www.bing.com/search?q=web+design+gracefully++resize&src=IE-SearchBox&FORM=IE8SRC
This is the first truly good result from that search: http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript
but there are other good results as well.
尝试为主容器或主体本身指定固定宽度。
如果您发布当前的代码，我们可能会给您更好的解决方案。
Try giving a fixed width to the main container or the body itself.
If you post your current code, we may give you a better solution.
啊好吧，这将是一个评论，但我只是继续...
导航列重叠很可能是因为它是用固定宽度（px或em（它们是固定的）定义的）这个目的））而不是像百分比这样的流体单位。尊重 David Stratton（他是对的，在这里深入回答是一门艺术），请尝试在适当的时候使用百分比来构建布局，以使页面缩放良好。
为了响应固定外部容器宽度的想法，这也是一种可能性，但如果用户拥有非常小的屏幕或，则这种可能性不会很好地降低非常高或低的分辨率。
尝试使用流畅的页面布局网页设计进行谷歌搜索
Ah well, this was going to be a comment, but I just kept going...
The nav column overlap is most likely because it is defined with a fixed width (px or em (which are fixed for this purpose)) and not a fluid unit like percentage. With all respect to David Stratton (and he's right, it is an art to in-depth to be answered here), try building your layout using percentages when appropriate to make the page scale well.
In response to the idea of fixing the width of an outer container, that is also a possibility, but one which doesn't degrade nicely if the user has a very small or large screen or a very high or low resolution.
Try googling with fluid page layout web design