通过响应式设计适应更大的屏幕

时间:2013-02-08 00:00:52

标签: html css html5 css3

我在一个更大的屏幕(27英寸)上观看时设计的网页,有很多空白空间,它没有填充。我该如何处理这个问题?我已经使用媒体查询来适应最常见的分辨率。我应该如何设计更大的屏幕?我是否应该采用流畅的布局以提供更具前瞻性的解决方案并解决此问题?

3 个答案:

答案 0 :(得分:1)

您可以灵活地进行布局,或者为使用@media查询设置的大型显示器构建新的响应式布局

答案 1 :(得分:1)

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

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

如果屏幕宽度超过1200px,那么会改变主体上的字体颜色,它不适用于1199px及以下的屏幕。

答案 2 :(得分:0)

为包装div添加背景纹理以填充空格,或者如果您愿意,可以添加一个甚至可以为3000px +宽的背景,只需将其居中,以便在屏幕变大时它会继续向外但是会对于较小的分辨率仍然可以。

通常情况下,您还可以使用响应式布局来解决@media查询等问题。

以下是一些例子: