Question

我使用Dreamweaver CC让我的网站响应。我的屏幕尺寸超过1000px时出现问题。

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

有没有办法阻止网站超过1000px？意思是即使它在1680 x 1050的宽屏上观看，该网站只会保持1000px并且可能在两边填充一些边距空间？或者我应该建立一个说1600px横幅的网站？

Answer 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的页脚中看到。

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

1 个答案: