@media用法解释 

<!doctype html>
<html>
        <head>
                <meta charset=utf-8>
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
                <!--[if lt IE 9]>
                    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
                     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
                    <![endif]-->
                    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
        </head>
    <body>
<style type=text/css>
/*当浏览器尺寸小于960px时候的代码：*/
@media screen and (max-width:960px){
    body{
        background:green;
    }
}
/*当浏览器尺寸等于960px时候的代码：*/
@media screen and (max-device-width:960px){
    body{
        background:red;
    }
}
/*当浏览器尺寸大于960px时候的代码：*/
@media screen and (min-width:960px){
    body{
        background:blue;
    }
}
/*混合使用上面的用法：
@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}*/
</style>
    </body>
</html>

 

posted @ 2020-02-23 21:55  一阙梅曲香素笺  阅读(1401)  评论(0)  编辑  收藏  举报