CSS3 media_query的使用

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    body {
        background-color: grey;
    }
    @media screen and (max-width: 960px) {
        body {
            background-color: red;
        }
    }
    @media screen and (max-width: 768px) {
        body {
            background-color: orange;
        }
    }
    @media screen and (max-width: 550px) {
        body {
            background-color: yellow;
        }
    }
    @media screen and (max-width: 320px) {
        body {
            background-color: green;
        }
    }

    </style>
</head>
<body>
    <div style="height: 500px;"></div>
</body>
</html>

演示地址
http://xhope.top/samples/html/media_query.html