@media用法解釋

本文轉載自查看原文 2020-02-23 21:55 932 web前端

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 bootStrap @media 用法 calc,support,media各自的含義及用法 php fopen用法以及解釋 SQL SERVER PIVOT與用法解釋 vue中的深拷貝lodash的用法及解釋 C語言中system函數用法解釋匯編語言各種指令的解釋與用法 css3 media媒體查詢器用法總結（附js兼容方法） umijs 配置的一些用法和解釋記錄解釋內存中的棧、堆和靜態存儲區的用法？