现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备，但是网站开发人员却面临一个挑战：如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果，如何在各种大小的屏幕上提供一流的用户体验,答案是：采用响应式设计。响应式设计可以随所显示的屏幕大小而改变。实现响应式设计的主要方法是使用 CSS 媒体查询。--摘自IBMdeveloperworks

相信大家很多人都了解Bootsrap这个响应式框架，简单来说，该框架根据不同的分辨率提供非常友好的浏览体验，里面的核心就是媒体查询@media。

 

如何使用?

@media (min-width:800px) { ... }

这是一条基本的媒体查询语句，@media可以看成 if

如果@media后面的条件满足，则执行后面的花括号的语句。

简单尝试



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .header{
        background-color: red;
        width: 100%;
        height: 40px;
    }
    @media ( min-width: 500px) {
        .header{
            background-color: blue;
        }
    }
</style>
<body>

<div class="header"></div>

</body>
</html>



@media ( min-width: 500px) 这里开始判断当前的分辨率，如果最小分辨率为500px（分辨率在500px以上）则
.header 的背景色变为蓝色，相当于重写了background-color属性。
请多尝试其他属性如width，block等等。

制作响应式导航



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>媒体查询</title>
    <script rel="script" src="jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("a").click(function(){
                $("li").toggle();
            })
        })
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #header{
            width: 100%;
            background-color: #4db14d;
            height: 40px;
        }
        ul{
        }
        li{
            float: left;
            list-style: none;
            width: 80px;
            display: block;
            padding-top: 10px;
            color: #fff;
            background-color: #4db14d;
            text-align: center;
        }
        a{
            padding-top: 10px;
            padding-bottom: 10px;
            color: #fff;
            display: none;
            width: 100%;
            text-align: center;
        }
        @media ( max-width: 520px ) {
            li{
                width: 100%;
                border-top: 1px solid #1b961b;
                padding-bottom: 10px;
                display: none;
            }
            a{
                display: block;
            }
        }
    </style>
</head>
<body>

<div id="header">
    <a>Fuck</a>
    <ul>
        <li>测试1</li>
        <li>测试2</li>
        <li>测试3</li>
        <li>测试4</li>
        <li>测试5</li>
        <li>测试6</li>
    </ul>
</div>
</body>
</html>



在导航中，除了菜单以外肯定还有展开菜单的图标(低分辨率下),所以我们制作的时候可以先写上，并将它隐藏。

我们做的仅是判断分辨率，如果分辨率小余某个值，则隐藏菜单，使用菜单突变将它显示。

注意的是我这里将小分辨率下，菜单的宽度设置到了100%，方便使用体验。可以尝试更好地方法。

然后使用jQuery显示/隐藏菜单or菜单图标

 

 

除此之外，还可以有更多的判断，如：分辨率在800-1200之间（min-width:800px）and (max-width:1200px)

@media (min-width:800px) and (max-width:1200px) { ... }