html - 媒体查询不起作用。我究竟做错了什么？

问题描述

当我调整窗口大小时，媒体查询不起作用，(max-width: 768px)正在工作并且(max-width:425px)不起作用，但是当我检查我的页面时，两者都不起作用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        h2 {
            text-align: center;
            padding-top: 50px;
            text-transform: uppercase;
        }

        span {
            font-size: 40px;
            padding: 10px;
            background-color: rgba(68, 77, 78, 0.6);
        }

        .box {
            position: relative;
            width: 25%;
            float: left;
        }

        .img-text {
            position: absolute;
            top: 0;
            left: 0;
        }

        .project-image {
            width: 100%;
            height: auto;
        }

        /* this is working when resize window but not when I inspect my page */

        @media screen and (max-width: 768px) {
            .box {
                width: 50%;
            }
        }

        /* this is not working on both */

        @media screen and (max-width: 425px) {
            .box {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div id="project">
        <h2>Project</h2>
        <div class="project-img-container">
            <div class="box">
                <span class="img-text">Summer House</span>
                <img class="project-image" src="house5.jpg" alt="#">
            </div>

            <div class="box">
                <span class="img-text">Brick House</span>
                <img class="project-image" src="house2.jpg" alt="#">
            </div>

            <div class="box">
                <span class="img-text">Renovated</span>
                <img class="project-image" src="house3.jpg" alt="#">
            </div>

            <div class="box">
                <span class="img-text">Barn House</span>
                <img class="project-image" src="house4.jpg" alt="#">
            </div>

            <div class="box">
                <span class="img-text">Summer House</span>
                <img class="project-image" src="house2.jpg" alt="#">
            </div>

            <div class="box">
                <span class="img-text">Brick House</span>
                <img class="project-image" src="house5.jpg" alt="#">
            </div>

            <div class="box">
                <span class="img-text">Renovated</span>
                <img class="project-image" src="house4.jpg" alt="#">
            </div>

            <div class="box">
                <span class="img-text">Barn House</span>
                <img class="project-image" src="house3.jpg" alt="#">
            </div>
        </div>
    </div>

</body>

</html>

为什么我的代码输出在检查窗口和实时服务器上都不同？

标签： htmlcss

html - 媒体查询不起作用。我究竟做错了什么？

问题描述

解决方案

推荐阅读