html - 通过响应式设计容纳更大的屏幕

Question

我设计的网页在更大的屏幕（27 英寸）上查看时，有很多空白区域无法填充。我将如何处理这个问题？我已经使用媒体查询来适应最常见的分辨率。我应该如何设计更大的屏幕？我是否也应该有一个流畅的布局，以获得更面向未来的解决方案并处理这个问题？

score 1 · Accepted Answer

1

您可以使布局灵活，或使用@media 查询为更大的显示构建新的响应式布局

于 2013-02-08T00:03:31.943 回答

score 1 · Accepted Answer

您可以使用最小宽度媒体查询来定位更大的屏幕。

/* Target 1200px wide and above */
@media (min-width: 1200px) {
    body {
        color: red;
    }
}

如果屏幕宽于 1200 像素，这将改变正文上的字体颜色，它不适用于 1199 像素及以下的屏幕。

score 0 · Accepted Answer

将背景纹理添加到包装 div 以填充空间，或者如果您愿意，添加甚至可以是 3000 像素 + 宽的背景，只需简单地将其居中，这样如果屏幕变大它会继续向外但仍然可以对于较小的分辨率。

通常，您还可以有一个响应式布局，可以处理@media 查询等。

这里有几个例子：

3 回答 3