css 媒体查询

最新推荐文章于 2024-04-19 07:53:30 发布

郭浩326

最新推荐文章于 2024-04-19 07:53:30 发布

阅读量255

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/guohao326/article/details/77056341

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询</title>
    <style>
        /*@media screen and (min-width: 1118px){}*/
        .box{
            width: 100px;
            height: 100px;
        }
        /*1366*/
        @media screen and (min-width:1024px) and (max-width:1439px){
            .box{
                background: #ff76bc;
            }
        }
        /*1440*/
        @media screen and (min-width:1440px) and (max-width:1600px){
            .box{
                background: #0b486b;
            }
        }
        /*1920*/
        @media screen and (min-width:1601px) and (max-width:1920px){
            .box{
                background: #e1b700;
            }
        }
    </style>
</head>
<body>

</body>

<div class="box">
</div>
</html>