@media

RollsRoycewk發表於2020-11-11

css2中的媒體查詢

<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <link rel="stylesheet" href="./01.css" media="tv">
    <style media="tv">
        .box {
            background-color: green;
        }
    </style>
</head>
 
<body>
    <div class="box">
 
    </div>
</body>

css3中的媒體查詢

<style>
        .box {
            width: 100px;
            height: 100px;
 
            /* css3中的媒體查詢不能直接給某個屬性設定，而是設定給選擇器 */
            /* @media screen {
                background-color: red;
            } */
        }
 
        @media screen {
            .box {
                background-color: yellow;
            }
        }
 
        @media tv {
            .box {
                background-color: pink;
            }
        }
    </style>
</head>
 
<body>
    <div class="box">
 
    </div>
</body>

媒體查詢媒介型別特徵

<style>
        .box {
            width: 100px;
            height: 100px;
        }
 
        /* @media (min-width: 500px) {
            .box {
                background-color: yellow;
            }
        }
 
        @media (max-width: 500px) {
            .box {
                background-color: red;
            }
        } */
        @media (orientation: landscape) {
            .box {
                background-color: rgb(112, 112, 108);
            }
        }
 
        @media (orientation: portrait) {
            .box {
                background-color: red;
            }
        }
    </style>
</head>
 
<body>
    <div class="box">
 
    </div>
</body>

媒體查詢媒介邏輯

<style>
        .box {
            width: 100px;
            height: 100px;
        }
 
        @media not screen and (orientation: landscape) {
            .box {
                background-color: rgb(112, 112, 108);
            }
        }
 
        /* @media tv,
        (orientation: portrait) {
            .box {
                background-color: red;
            }
        } */
    </style>
</head>
 
<body>
    <div class="box">
 
    </div>
</body>

媒體查詢的巢狀

<style>
        .box {
            width: 100px;
            height: 100px;
        }
 
        /* @media screen and (orientation: landscape) {
            .box {
                background-color: rgb(112, 112, 108);
            }
        }
 
        @media screen and (orientation: portrait) {
            .box {
                background-color: red;
            }
        } */
 
        @media screen {
            @media (orientation: landscape) {
                .box {
                    background-color: rgb(112, 112, 108);
                }
            }
 
            @media (orientation: portrait) {
                .box {
                    background-color: red;
                }
            }
        }
    </style>
</head>
 
<body>
    <div class="box">
 
    </div>
</body>

less中的媒體查詢

.box {
    width: 100px;
    height: 100px;
 
    @media screen and (orientation: landscape) {
        background-color: rgb(112, 112, 108);
    }
 
    @media screen and (orientation: portrait) {
        background-color: red;
    }
}

相關文章