媒体查询简单应用[例]

文章出处: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%;
    }
}

 

 例子源代码见附见。