媒体查询简单应用[例]

iteye_3366

于 2013-02-25 15:29:49 发布

阅读量168

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery mobile

本文链接：https://blog.youkuaiyun.com/iteye_3366/article/details/82479406

jQuery mobile 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用媒体查询实现响应式布局的方法。当浏览器宽度大于800px时，两个控件（listview和grid）并排显示；当浏览器宽度小于800px时，则纵向排列。通过CSS媒体查询实现了这一效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

例子源代码见附见。