时间戳

首页 > 解决方案 > 媒体查询问题。Class 和 id 在媒体查询中不起作用

html - 媒体查询问题。Class 和 id 在媒体查询中不起作用

问题描述

body{
            font-family: sans-serif;
            font-size: 15px;
        }
        .main{
            background-color: pink;
            width:80%;
            float:left;
            max-width: 53em;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        article{
            padding: 3em;
        }

        
        nav a{
            display: block;
            color: black;
            text-decoration: none;
            padding: .3em;
            background-color: gold;
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box;
        }
        nav a:hover{
            background-color: pink;
        }
        nav{
            margin:0;
            width:20%;
            float: left;
            overflow:hidden;
        }
        .container{
            max-width: 60%;
            margin: 2em auto;
        }
        figure{
            margin:0;
        }
        article img{
            width:100%;
        }
        @media only screen and (max-width: 66em){

            .container{
                width:90%;
            }
        }
        @media only screen and (max-width: 53em){
            nav{
                float:none;
                width: 100%;
            }
            nav a{
                float:left;
                width: 20%;
                padding: 1em;
                text-align: center;
            }
            .main{
                float: none;
                width:100%;
            }
        }
        @media only screen and (max-width: 32em){
            .container{
                width:100%;
                margin:0;
            }
            article{
                padding: 1em;
            }
        }
        @media only screen and (max-width: 20em){
                body{
                    margin:0;
                    padding: 0;
                }
                nav a{
                float:none;
                width: auto;
                padding: 0.3em;
                }
        }
<head>
    <meta charset="utf-8">
     <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <title>Responsive design</title>
</head>
<body>
    <div class='container'>
        <nav>
            <ul>
                <li><a href="?page=1">One</a></li>
                <li><a href="?page=2">Two</a></li>
                <li><a href="?page=3">Three</a></li>
                <li><a href="?page=4">Four</a></li>
                <li><a href="?page=5">Five</a></li>
            </ul>
        </nav>
    </div>
</body>

我正在写作，因为我的媒体查询不起作用。实际上，类和 id 不起作用。我能做什么？这段代码只是练习，但我想知道为什么它不起作用。顶部和底部是标签html和DOCTYPE html，但没关系。我写对了。身体其他部位也一样。

标签： htmlcssclassmedia-queries

解决方案

我还没有足够的声誉来评论帖子，但是我可以理解为什么在 32em 媒体查询中将 .container 设置为 100% 后您没有得到预期的结果。这是因为您将 .container 最大宽度设置为 60%。尝试添加 max-width:100%，如下所示：

@media only screen and (max-width: 32em){
        .container{
            width: 100%;
            margin: 0;
            max-width: 100%;
        }
        article{
            padding: 1em;
        }
    }

推荐阅读