如何在放大/缩小时阻止 CSS 布局扭曲？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9709125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I stop a CSS layout from distorting when zooming in/out?
提问by Pztar
I've set up a very basic site with a #container div that includes the #navbar and #content. However, when I zoom in or out, the #navbar distorts, if I zoom in the links get pushed down below each other instead of being inline. If I zoom out, too much padding is added between the links. How can I stop this?
我已经建立了一个非常基本的网站，其中包含#navbar 和#content 的#container div。但是，当我放大或缩小时，#navbar 会扭曲，如果我放大链接会被推到彼此下方而不是内联。如果我缩小，链接之间会添加太多填充。我怎么能阻止这个？
HTML:
HTML：
<div id="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="top.html">Top</a></li>
<li><strong><a href="free.html">FREE</a></strong></li>
<li><a href="photo.html">Photo</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div id="content">
<p>Some sample text.<p>
</div>
</div>
CSS:
CSS：
#container {
position: static;
background-color: #00bbee;
margin-left: 20%;
margin-right: 20%;
margin-top: 7%;
margin-bottom: 15%;
border: 2px solid red;
}
#navbar ul{
list-style: none;
}
#navbar li{
display: inline;
}
#navbar li a{
text-decoration: none;
color: #11ff11;
margin: 3%;
border: 1px dotted orange;
padding-left: 4px;
}
#navbar li a:hover {
background-color: white;
color: green;
}
#navbar {
background-color: #eeeeee;
padding-top: 2px;
padding-bottom: 5px;
border: 1px solid yellow;
}
How can I stop it from distorting?
我怎样才能阻止它扭曲？
Also, I'm still pretty new to CSS, I was taught to use % instead of px. Is that right? Also anything else you've got to point out, please let me know.
另外，我对 CSS 还是很陌生，我被教导使用 % 而不是 px。那正确吗？还有什么你要指出的，请告诉我。
Thanks in advance!
提前致谢！
采纳答案by Pztar
As this question still gets constant views, I'll post the solution I use currently.
由于这个问题仍然得到不断的关注，我将发布我目前使用的解决方案。
CSS Media Queries:
CSS 媒体查询：
@media screen and (max-width: 320px) {
/*Write your css here*/
}
@media screen and (max-width: 800px) {
}
Check out: CSS-Tricks + device sizesand Media Queries
回答by London804
I had a similar problem that I fixed by adding an extra div around my navigation menu. I then added the following
我有一个类似的问题，我通过在导航菜单周围添加一个额外的 div 来解决这个问题。然后我添加了以下内容
#menu-container {
position: absolute;
white-space: nowrap;
overflow: hidden;
}
This prevented it from wrapping. Hope it works.
这阻止了它包装。希望它有效。
回答by helper
To fix the problem with zooming in, try adding the min-widthattribute to your outer countainer (#containeror #navbar?).
Setting min-widthprevents the webpage from trying to shrink down beyond the specified width (i.e. 300px). If you zoom in too far, instead of the elements inside the <div>jumping down onto the next line, your navbar will stop shrinking and a scrollbar will appear at the bottom of the page.
要解决放大问题，请尝试将min-width属性添加到外部计数器（#container或#navbar？）。设置min-width可防止网页尝试缩小超过指定的宽度（即 300 像素）。如果你放大太多，而不是里面的元素<div>跳到下一行，你的导航栏将停止缩小，页面底部会出现一个滚动条。
Example (in your stylesheet):
示例（在您的样式表中）：
#navbar {min-width:300px;}
Another good way of achieving this is to apply the min-width attribute to the page body.
实现此目的的另一个好方法是将 min-width 属性应用于页面正文。
Example (in your stylesheet):
示例（在您的样式表中）：
body {min-width:300px;}
Finally, if you want to make your navbar span the full width of the page, use {clear:both;}in the stylesheet.
最后，如果您想让导航栏跨越页面的整个宽度，请{clear:both;}在样式表中使用。
回答by Dominik Schmidt
I would just set absolute heights and widths to all elements/divs on the page.
我只会为页面上的所有元素/div 设置绝对高度和宽度。
id {height: 250px; width: 500px}
id {高度：250px; 宽度：500px}
Or you could also use min/max-width/hight to adjust the page layout on different screen sizes or when resizing the browser window.
或者您也可以使用 min/max-width/hight 来调整不同屏幕尺寸或调整浏览器窗口大小时的页面布局。
回答by RedDevils
It is mainly because u have set your width or margin properties in percentage. If you do so make sure u provide maximum width to such element
这主要是因为您以百分比设置了宽度或边距属性。如果这样做，请确保为此类元素提供最大宽度
回答by Gordon Mcleod
Here you go, this is a lot like the above suggestions but its got a fixed width content area, if you were looking for full width I'm sorry (;_;)
给你，这很像上面的建议，但它有一个固定宽度的内容区域，如果你正在寻找全宽，我很抱歉 (;_;)
<style>
body {
margin:0px;
}
#container {
width:990px;
background-color: #00bbee;
margin:0 auto;
border: 2px solid red;
}
#navbar ul {
list-style: none;
}
#navbar li {
display: inline;
}
#navbar li a {
text-decoration: none;
color: #11ff11;
margin: 3%;
border: 1px dotted orange;
padding-left: 4px;
}
#navbar li a:hover {
background-color: white;
color: green;
}
#navbar {
background-color: #eeeeee;
padding-top: 2px;
padding-bottom: 5px;
border: 1px solid yellow;
}
</style>
<div id="container">
<div id="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="top.html">Top</a></li>
<li><strong><a href="free.html">FREE</a></strong></li>
<li><a href="photo.html">Photo</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div id="content">
<p>Some sample text.
<p>
</div>
</div>
回答by jimmybisenius
You're going to want to use a css media query to set break points for different styles in your css. Which if used correctly will fix any distortion issues.
您将要使用 css 媒体查询为 css 中的不同样式设置断点。如果使用得当，可以解决任何失真问题。
回答by Diodeus - James MacFarlane
Different browsers user different techniques for zoom. All of them have faults. Using percentages will introduce rounding errors. There are no easy answers.
不同的浏览器使用不同的缩放技术。他们都有毛病。使用百分比会引入舍入误差。没有简单的答案。
See: http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html
参见：http: //www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html
回答by Lobabob
Hmm....have you tried adding in min-width/min-height properties yet? You could just include those properties on your #container div. That might just do the trick.
嗯....你试过添加最小宽度/最小高度属性了吗？您可以在#container div 中包含这些属性。那可能就行了。
