我浏览了网站 http://www.swiftkey.net .
在我的宽屏上，我看到内容区域两侧的灰色背景。在我的常规 (1024x768) 上，灰色条不存在。
他们是如何实现这种效果的？
使用 Firebug ，我能够破译我认为可能会做的事情:
.w1 {
float: left;
width: 1600px;
position: relative;
left: 50%;
}
.w2 {
float: left;
width: 1600px;
position: relative;
}
我确实有 CSS 和 HTML 方面的经验，但上面的代码对我来说有点神秘，尤其是考虑到 w2 在 w1 中。
最佳答案
我在假设您所说的灰色条是第二个示例图像中显示的灰色条的情况下回答这个问题:
简单的答案是页面使用了一个水平居中的静态最大宽度的包装器:
#wrapper {
max-width: 1000px;
margin: 0 auto; //centers a block element
}
灰色条是通过在 <body> 上设置背景颜色创建的或 <html>元素:
body {
background-color: #888;
}
我还没有查看源代码以查看这些样式的具体设置位置，我将把它留给读者作为练习。
关于css - 检测屏幕分辨率，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12588559/