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

我使用Dreamweaver CC使我的网站响应。我在屏幕尺寸超过1000像素时遇到问题。超过1000px屏幕分辨率的响应式设计

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

有没有办法阻止网站超过1000px？即使在1680 x 1050的宽屏上查看该网站，该网站只会保留1000像素，并且可能会在两侧填充一些空白空间？或者我应该只用1600px的横幅构建网站？

来源

2015-04-04 Jade

所以，你说导航条比横幅图像宽吗？问题在于，如果将横幅图像制作得像屏幕尺寸一样宽，则看起来会拉长。 – Phantom 2015-04-04 05:59:57

这真的不是我认为与响应式设计相关的东西，而是更多沿着大屏幕偏好的线条。所有响应式设计都适用于大屏幕。

理想情况下，您可以有一个包装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

框架像引导用容器类只具有内容达到一定的宽度。这允许父容器扩展全部宽度。这也可以在jsbin的页脚中看到。

来源

2015-04-04 07:35:17 Ace

王牌，你真是太棒了！非常感谢您以这样的精度和细节回答我的问题！我真的很感谢你的帮助:) – Jade 2015-04-04 12:37:02

@Jade没问题！只是将答案标记为接受:) – Ace 2015-04-05 07:05:27

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

回答

相关问题