Css 检测屏幕分辨率

我偶然发现了这个网站

在我的宽屏上，我看到内容区域两侧的灰色背景。在我的普通屏幕（1024x768）上，灰色条不在那里

他们是如何达到这种效果的

使用firebug，我能够破译我认为可能在做的事情：

.w1 {
    float: left;
    width: 1600px;
    position: relative;
    left: 50%;
}
.w2 {
    float: left;
    width: 1600px;
    position: relative;
}

---

我确实有CSS和HTML方面的经验，但上面的代码对我来说有点神秘，特别是考虑到w2在w1中。

这必须通过javascript屏幕对象来完成

var scr=window.screen;
var availwidth=scr.availWidth;
var width=scr.width;
var availh=scr.availHeight;
var height=scr.height;

availWidth和availHeight给出了实际可用的宽度和高度，并考虑了任务栏和滚动条等。 宽度和高度为实际屏幕分辨率。然后访问变量并决定布局的类型

然而，将任何东西调整到中心是很容易的

div
{
width:1024px;
position:absolute;
left:50%;
margin-left:-512px;
}

---

javascript屏幕宽度跟踪用于更多控制选项

我在回答这个问题时假设您所说的灰色条是第二个示例图像中显示的：

---

简单的答案是，页面使用静态最大宽度的包装器，该包装器水平居中：

#wrapper {
    max-width: 1000px;
    margin: 0 auto; //centers a block element
}

灰色条是通过在

或

元素上使用背景色创建的：

body {
    background-color: #888;
}

---

我还没有查看源代码以了解这些样式的具体设置，我将把它作为读者的练习。

同意使用媒体查询：您不需要JavaScript使CSS在不同分辨率下表现不同。是的，但标题说检测屏幕分辨率，所以我添加了js部分，你看。标题有误导性。正确阅读问题和答案。你忘了提到文本对齐：居中；必须在包含页边距的元素上设置：0px auto；使元素居中。是否确定？不是所有的浏览器都会单独使用该命令自动集中内容，是吗？我花了很长时间研究如何将我的网页和文本居中对齐：居中；作为最佳和最广泛支持的解决方案在web上多次弹出。@在CB-c中，元素需要具有静态宽度或最大宽度，并另外使用

display:block；左边距：自动；右边距：自动。