前端第四章——媒体查询

最新推荐文章于 2024-02-05 11:29:53 发布

qianmingmaoyao

最新推荐文章于 2024-02-05 11:29:53 发布

阅读量260

点赞数

文章标签：前端媒体 css

本文链接：https://blog.csdn.net/qianmingmaoyao/article/details/126535467

版权

01-max-width-min-width

  <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        /* 最大的宽度:max-width 小于等于*/
        
        @media screen and (max-width:768px) {
            .box {
                background-color: red;
            }
        }
        /* 当等于768时,以下覆盖 */
        /* 最小宽度:min-width 大于等于 */
        
        @media screen and (min-width:768px) {
            .box {
                background-color: blue;
            }
        }
    </style>
</head>

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

02-多个设置特性============

 <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        /* 多个设备特性 */
        /* and:前后要有空格 */
        
        @media screen and (min-width:768px) and (max-width:1200px) {
            .box {
                background-color: blue;
            }
        }
    </style>
</head>

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

03-引入不同的css样式=============

  <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style-type: none;
        }
    </style>
    <!-- 使用link引入不同的css样式 -->
    <!-- <link rel="stylesheet" media="(max-width:768px)" href="css/01.css">
    <link rel="stylesheet" media="(min-width:768px)" href="css/02.css">
    <link rel="stylesheet" media="(min-width:1200px)" href="css/03.css"> -->
    <link rel="stylesheet" href="css/04.css">
</head>

<body>
    <ul class="list">
        <li>第一部分</li>
        <li>第二部分</li>
        <li>第三部分</li>
        <li>第四部分</li>
    </ul>
</body>

04-不同的媒体特性

 <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        /* 多个设备特性 */
        /* and:前后要有空格 */
        
        @media screen and (max-width:768px) and (orientation:landscape) {
            .box {
                background-color: blue;
            }
        }
    </style>
</head>

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