@media用法解释

2020-02-23 22:02:03 阅读：472 来源： 互联网

标签：body 解释 media screen 用法 width 960px background

<!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>

标签：body,解释,media,screen,用法,width,960px,background
来源： https://www.cnblogs.com/chenduzizhong/p/12354589.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

@media用法解释