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

Question

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

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

有没有办法阻止网站超过 1000 像素？这意味着即使在 1680 x 1050 的宽屏上查看该网站也只会保持 1000 像素并且可能在两边填充一些边距 space？或者我应该只用 1600 像素的横幅来构建网站？

Answer 1

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

根据您的情况，您可以使用包装 div 并在其上应用 max-width。你也可以去老派，把它应用到 body 但可能不是一个好主意。

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

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

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

这是一个 jsbin，当查看超过 1000 像素时，您可以看到应用于 body 的红色背景。

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

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

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

Responsive design for over 1000px screen resolution

html

css

responsive-design