媒体查询简单应用[例]

文章出处:http://www.ibm.com/developerworks/cn/mobile/mo-jquery-responsive-design/index.html
以上文章讲解了一个关于媒体查询的极简单的应用：

即在一个页面中有两个控件（listview & grid），当(设备)浏览器宽度在800px以上时，使listview 和 grid并排显示：

当（设备）浏览器宽度在800px以下时，使listview 和 grid纵向排列显示：

?

?实现该效果的关键代码如下：

@media all and (min-width: 800px) {    #nav {        width: 300px;        float: left;        margin-right: 20px;    }    #grid {        width: 450px;        float: left;    }}@media all and (max-width: 799px) {    #nav {        width: 100%;    }    #grid {        width: 100%;    }}

?

?例子源代码见附见。

?

?

?

?

?