由于这个问题仍然得到不断的意见，我将张贴我目前使用的解决方案。
CSS媒体查询：

@media screen and (max-width: 320px) { 

/*Write your css here*/

}

@media screen and (max-width: 800px) { 

}

checkout ：CSS-Tricks + device sizes和Media Queries

我也遇到过类似的问题，我在导航菜单周围添加了一个额外的div，然后添加了以下内容

#menu-container {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;

}

这使它无法 Package 希望能起作用。

要解决放大问题，请尝试将min-width属性添加到外部计数器（#container还是#navbar？）。设置min-width可防止网页尝试缩小到超过指定宽度（IidoE.300px）。如果你放大得太远，而不是<div>内部的元素跳到下一行，你的导航条将停止收缩并且一个滚动条将出现在页面的底部.
示例（在样式表中）：

#navbar {min-width:300px;}

另一个很好的实现方法是将min-width属性应用于页面主体。
示例（在样式表中）：

body {min-width:300px;}

最后，如果你想让你的导航栏横跨页面的整个宽度，在样式表中使用{clear:both;}。

嗯......你试过添加最小宽度/最小高度属性吗？你可以把这些属性包含在你的#container div中。这可能会很有用。

不同的浏览器使用不同的缩放技术。它们都有缺点。使用百分比会引入舍入误差。没有简单的答案。
参见：http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html

我只需要为页面上的所有元素/div设置绝对高度和宽度。

ID {高度：250像素;宽度：500像素}

或者您也可以使用min/max-width/hight来调整不同屏幕大小或调整浏览器窗口大小时的页面布局。

这主要是因为你已经设置了你的宽度或边距的百分比属性。如果你这样做，请确保你提供的最大宽度，这样的元素

给你，这很像上面的建议，但是它有一个固定宽度的内容区域，如果你想找全宽度的，对不起（;_;）

<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>

你会想要使用一个css媒体查询来设置css中不同样式的断点，如果使用正确的话，它将修复任何失真问题。