Question

我遇到了网站http://www.swiftkey.net。

在我的宽屏幕上，我看到内容区域两侧的灰色背景。在我的常规（1024x768）中，灰色条不存在。

他们如何实现这种效果？

使用萤火虫，我能够破译我认为可能会这样做的事情：

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

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

Answer 1

我正在回答这个问题，假设您所谈论的灰色条纹是第二张示例图片中显示的那些：

Sample Screenshot 1 Sample Screenshot 2

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

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

通过在<body>或<html>元素上添加背景颜色来创建灰色条：

body {
    background-color: #888;
}

我没有检查来源以查看这些样式的具体设置，我将把它作为读者的练习。

Answer 2

这必须使用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屏幕宽度跟踪用于更多控制选项

检测屏幕分辨率

2 个答案: