压缩 Header 部分
第一步是让 Logo 部分能在小屏幕上显示，因为这个 Logo 是基于背景图片的，因此很好办，同时，提供一个小尺寸的背景图，以便和 Logo 搭配。
body {
background-image: url(/img/small-bg.png);
}#wrapper {
width: auto;
margin: auto;
text-align: left;
background-image: url(/img/small-logo.png);
background-position: left 5px;
background-repeat: no-repeat;
min-height: 400px;
}
code hosted by snipt.net
body {
background-image: url(/img/small-bg.png);
}#wrapper {
width: auto;
margin: auto;
text-align: left;
background-image: url(/img/small-logo.png);
background-position: left 5px;
background-repeat: no-repeat;
min-height: 400px;
}
code hosted by snipt.net
body {
background-image: url(/img/small-bg.png);
}#wrapper {
width: auto;
margin: auto;
text-align: left;
background-image: url(/img/small-logo.png);
background-position: left 5px;
background-repeat: no-repeat;
min-height: 400px;
}
单列式布局
下一步主要的工作是将多栏式布局换成单栏式，桌面版使用 Float 实现多栏布局，要改成单栏，只需将 float 设置为 float:none，并将 width 设置为 width:auto，这样，就实现了单列式布局。
.article #aside {
float: none;
width: auto;
}
code hosted by snipt.net
.article #aside {
float: none;
width: auto;
}
code hosted by snipt.net
.article #aside {
float: none;
width: auto;
}
再紧凑一些
然后，将margin 和 padding 进行调整，使之更紧凑一些：
在 iPhone 中测试
在 iPhone 中实际测试的时候，发现网站在单列式布局中仍然向外延伸了，从 Safari developer website 找到解决办法，在网站头，添加一个 meta tag，将网站的视窗宽度设置成何设备一致。
<meta name="viewport" content="width=device-width" />
code hosted by snipt.net
<meta name="viewport" content="width=device-width" />
code hosted by snipt.net
<meta name="viewport" content="width=device-width" />
