在HTML5的应用中，响应式页面设计是比较热门的话题，下面通过一个例子阐述一下如何使用媒体查询完成响应式设计。

　　本网页在屏幕宽度超过800的分辨率显示多栏布局，否则显示单栏布局，效果如图：

　　多栏布局

　　单栏布局

　　首先分析布局，多栏布局是典型的T型布局，这类布局在PC端比较常见，也非常容易做到。网页分为上中下三个部分，即页头、内容和页脚，其中内容部分又分为左右两栏，网页整体布局如下：

　　首先按照PC端布局编写样式，container宽度为980px，居中。导航栏使用ul实现，关键代码：

　　#header ul{

　　background:#663;

　　height:50px;

　　border-radius: 5px;

　　text-align: center;

　　}

　　#header li{

　　display:inline-block;

　　color:white;

　　line-height: 50px;

　　margin: 0 50px;

　　}

　　main和aside使用浮动改变方向，并指定各自的宽度，关键代码：

　　#main{

　　background:white;

　　border-radius: 5px;

　　width:700px;

　　padding: 5px;

　　float:left;

　　}

　　#aside{

　　float:right;

　　width:260px;

　　}

　　页脚样式和页头导航部份类似。

　　完成PC端布局后，使用媒体查询编写宽度小于800px分辨率的布局，找出关键点，并重写CSS代码。

　　@media screen and (max-width:800px) {

　　}

　　首先改变布局容器宽度，从固定宽度980px改为100%，去掉居中属性。

　　#container{

　　width:100%;

　　margin: 0;

　　}

　　导航部分由原来的水平排列改为垂直排列，关键点是将原来为ul编写的背景和圆角边框改成为li编写，恢复li的默认display属性：

　　#header ul{

　　background:none;

　　height: auto;

　　}

　　#header li{

　　display:block;

　　margin: 5px 0;

　　background:#663;

　　border-radius: 5px;

　　}

　　接下来去掉main和aside的浮动属性，宽度改为100%，同时将main当中的图片改为弹性图片：

　　#main,#aside{

　　float:none;

　　width:100%;

　　}

　　#main img{

　　max-width: 100%;

　　}

　　后修改页脚导航，修改方式与页头导航栏相同。