CSS3 Media Queries

使用 Media Queries 最直接的方法是，在你的 CSS 代码中，加一段独立代码分支，如下：

@media only screen and (max-device-width: 480px) {

}

接着，在这个分支中，为小屏幕编写独立的 CSS 定义，这些定义可以覆盖桌面版 CSS 中的相应定义（只要将这段分支代码放在后面），以下针对小屏幕的 CSS 将布局变成一栏式，且使用了小尺寸的 Header 图片：@media only screen and (max-device-width: 480px) {

div#wrapper {

width: 400px;

}

div#header {

background-image: url(media-queries-phone.jpg);

height: 93px;

position: relative;

}

div#header h1 {

font-size: 140%;

}

#content {

float: none;

width: 100%;

}

#navigation {

float:none;

width: auto;

}


}

对于小型的改动，直接在 CSS 代码中插入移动设备代码分支是很方便的，但对于大型站点，可以使用 Media Queries 链接独立的式样表文件，以便在独立的式样表文件中完全自由地为小设备编写 CSS 代码，方法如下：

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
测试 Media Queries

为了适应移动设备，将使用 Media Queries 加载独立的式样表：

<link
rel="stylesheet"
type="text/css"
media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)"
href="/assets/css/small-device.css"
/>

第一步是让 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;
}

单列式布局
下一步主要的工作是将多栏式布局换成单栏式，桌面版使用 Float 实现多栏布局，要改成单栏，只需将 float 设置为 float:none，并将 width 设置为 width:auto，这样，就实现了单列式布局。

.article #aside {
float: none;
width: auto;
}

再紧凑一些
然后，将margin 和 padding 进行调整，使之更紧凑一些：