1

我想知道是否可以设计一个最小分辨率为 1024x768 的网站，并且它的大小不超过 1300x800。

我不是真正的 CSS savoy，但我认为我可以使用min-width并且max-width该站点将保持在这些数字之间，但这不起作用。

这可能吗？我不认为我追求响应式设计，因为我不是为任何移动设备设计的。我只需要针对各种宽屏显示器。

我在这里看到的问题是，如果我设计一个 1024x768 的静态分辨率，并且某人的显示器和显卡能够达到 1920×1080，它看起来不会很好。我希望网站随着用户的屏幕扩大和缩小一点。

这是我目前拥有的。我在它下面有一个标题和两个内联 div。

#header {
position:relative;
float:left;
width:100%;
background:url(header.jpg) no-repeat #fff;
height:100px;
margin-bottom:5px
}

#wrapper {
height:100%;
width:98.5%;
min-width:1240px;
margin:0 auto
}

#grid-left {
width:45%;
float:left
}

#grid-right {
width:54%;
float:right
}

我发现 1240px 的宽度对于很多显示器来说太大了。

编辑：

澄清一下，我正在寻找的设计将从 1024 像素 x 768 像素开始，并增长到 1920×1080 的最大分辨率，但仅此而已。

4

2 回答 2

0

在您的 CSS 上，您实际上并没有max-width: 1500px在#wrapper 上指定。

这里的工作示例http://jsfiddle.net/davidpauljunior/CNaW9/

于 2013-10-23T06:34:50.217 回答
0

您可以在父容器中使用 width 而不是 min-width 和 max-width ，您可以使用

@media only screen 
and (min-device-width : 1024px) 
and (max-device-width : 1380px) 
{
    #wrapper {
      height:100%;
      min-width:1240px;
      margin:0 auto
    }
}

@media only screen 
and (min-device-width : 1400px)  
{
    #wrapper {
      height:100%;
      min-width:1300px;
      margin:0 auto
    }
}
于 2013-10-23T09:58:30.390 回答