未应用媒体查询

Question

在 this site，我有：

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<div id="wrapper">

    <div id="header">
            <div class="content">                   
            </div><!-- .content (end) -->
    </div><!-- #header (end) -->

    <div id="menu-wrapper">
        <div class="content">          
            <div class="clear"></div>

        </div><!-- .content (end) -->
    </div><!-- #menu-wrapper (end) -->

    <div id="main">
        <div class="content">
            <div id="content">            
            </div><!-- #content (end) -->
            <div id="sidebar">
            </div><!-- #sidebar (end) -->   
            <div class="clear"></div>
        </div><!-- .content (end) -->
    </div><!-- #main (end) -->

    <div id="footer-top"><!-- --></div>
    <div id="footer">
        <div class="content">
        </div><!-- .content (end) -->
    </div><!-- #footer (end) -->

</div><!-- #wrapper (end) -->
</body>

和：

一个 Wordpress 子主题样式 sheet 具有：

@import url("../stealth/style.css");

@media screen and (max-width:940x) {

    #header .content, #menu-wrapper .content, #main .content, #footer .content {
        width: 100%;
    }

}

但是，当视口小于 940px 时，#header .content、#menu-wrapper .content 和其余部分仍保持@940px 宽。

未应用媒体查询。

这是为什么？谢谢。

Answer 1

@media screen and (max-width:940x) {

错误！

@media screen and (max-width:940px) {

请修正 "px" 那里。

未应用媒体查询

media query not being applied

css

media-queries