超过 1000px 屏幕分辨率的响应式设计答案

【问题标题】：Responsive design for over 1000px screen resolution超过 1000px 屏幕分辨率的响应式设计
【发布时间】：2015-04-04 05:47:46
【问题描述】：

我正在使用 Dreamweaver CC 使我的网站具有响应性。我在屏幕尺寸超过 1000 像素时遇到问题。

在dreamweaver中，响应式网页设计的底部有三个选项，桌面1000px及以下，平板电脑768px及以下，移动端480px及以下。所以我的网站在所有这些设置下看起来很棒，这意味着它看起来很棒，少了 1000 像素。但是我家的屏幕是 1680 x 1050 像素，所以当我全屏查看我的网站时，导航栏比顶部的标题横幅图像要长。

有没有办法阻止网站超过 1000 像素？这意味着即使它在 1680 x 1050 的宽屏上观看，该网站也只会保持 1000 像素，并且可能会在两侧填充一些边距空间？还是我应该只用 1600px 的横幅构建网站？

【问题讨论】：

所以你说导航栏比横幅图片宽？问题是，如果您将横幅图像设为屏幕尺寸，它看起来会被拉伸。

标签： html css responsive-design

【解决方案1】：

这确实不是我认为与响应式设计相关的东西，而是更多地与大屏幕偏好有关。所有的响应式设计都会有适合大屏幕的样式。

理想情况下，您可以有一个包装 div 并在其上应用最大宽度。你也可以去老派，把它应用到身体上，但可能不是一个好主意。

<body>
   <div class="site-wrapper">
    ...rest of website...
   </div>
</body>

用下面的css来解决你的问题。只让 .site-wrapper 增长到 1000px 并且两边的边距相等。

.site-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

这是一个 jsbin，当查看超过 1000px 时，您可以看到应用到正文的红色背景。

http://jsbin.com/mifolecahi/1/edit?output

像 bootstrap 这样的框架使用容器类来只让内容达到一定的宽度。这允许父容器扩展整个宽度。这也可以在 jsbin 的页脚中看到。

【讨论】：

王牌，你太棒了！非常感谢您如此精确和详细地回答我的问题！非常感谢您的帮助:)