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子主题样式表：

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

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

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

}

但是，#header .content，#menu-wrapper .content＆amp;当视口小于940px时，其余的仍为@ 940px宽。

未应用媒体查询。

这是为什么？谢谢。

Answer 1

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

错了！

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

请修理＆＃34; px＆＃34;那里。

媒体查询未应用

1 个答案: