4

已解决：汤姆：你说的太对了。不幸的是，由于插件，WordPress 函数 wp_head() 添加了 width=1100。谢谢！

我正在开发一个新的响应式网站，但似乎无法让 @media 查询正常工作。在我的桌面上调整浏览器窗口大小时它确实有效，但它不适用于我的 ipad、iphone 或 android 手机。

我究竟做错了什么？！

这里是链接：http ://demo.mindspins.com/atmnieuw/ 这里是 CSS 的链接：http: //demo.mindspins.com/atmnieuw/wp-content/themes/atm/css/dynamic.php

提前致谢！

根据要求提供 CSS 代码：

@media all and (max-width: 1460px) {
    .site-width{ width: 1199px; }
    .main-width{ width: 719px; }
}
@media all and (max-width: 1220px) {
    .site-width{ width: 959px; }
    .main-width{ width: 479px; }
    #page-title h1.thetitle{
        font-size: 20px;
        line-height: 24px;
    }
    .sidebar .widget a.form-button-link, .sidebar .widget span.form-button-link{
        font-size: 20px;
        line-height: 24px;
    }
}
@media all and (max-width: 980px) {
    .site-width{ width: 719px; }
    .main-width{ width: 479px; }
    .right-width{ display: none; }
    #header-right{ display: none; }
    .widgets-wrapper-1{ display: block; }
    .widgets-wrapper-3{ display: block; position: relative; padding: 20px 0 0 20px; }
}
@media all and (max-width: 740px) {
    .site-width{ width: 95%; margin: 0 auto;}
    #header-wrapper{ width: 100%; }
    #header-left{ display: none; }
    #header-mid{ height: 80px; }
    #atmlogo a.atm {
        z-index: 100;
        top: 24px;
        left: 0;
    }
    .main-width{ width: 100%; }
    .left-width{ width: 100%; }
    .sidebar-left{ display: none; }
    .site-bg{ display: none; }
    #header-left span.header-contact{ height: 80px; width: 100%;}
    #main-nav{ height:auto !important; }
    #mobile-nav{
        margin: -4px 0 1px 0;
        display: block;
        position: relative;
        width: 100%;
    }
    #mobile-nav .nav-wrapper{
        display: block;
        color:  #fff;
        background: #cc0033;
        margin: 1px 0;
        height: 40px;
        padding: 0 10px;
    }
    #mobile-nav .nav-wrapper select.atm-dropdown{
        font-size: 12px;
        display: block;
        height: 40px;
        width: 100%;
        color:  #fff;
        background: #cc0033;
        border: 0;
        clear: both;
        -webkit-border-radius: 0;
        -webkit-appearance: none;
    }
    #mobile-nav .theme-s{
        width: 100%;
        background: #cc0033;
        color:  #fff;
    }

    #mobile-nav input.s{
        background: #cc0033;
        color:  #fff;
    }

    #mobile-nav input.searchsubmit{
        border-left: solid 1px #dcdcdc;
        color:  #fff;
        background: #cc0033;
        background-image: url(../images/icon_search.png);
        background-repeat: no-repeat;
        background-position: right top;
        -webkit-border-radius: 0;
        -webkit-appearance: none;
    }

    #primary{ display: none; }
    #main-content-header{
        height:auto !important;
        margin: 0 0 1px 0;
    }
    #main-content-header span.header-image{
        display: block;
        float: left;
        width: 25%;
        height:auto !important;
        margin: 0;
    }
    #main-content-header span.header-image img{
        line-height: 0px;
        margin: 0;
        padding: 0;
    }

    #page-title{
        height: 79px;
    }
}
@media all and (max-width: 500px) {
    body {
        font-size: 12px;
        line-height: 20px;
    }
        #footer-nav{ display: none; }
        #copyrights{ display: none; }
        .entry-content-bg{ padding: 20px; }
        #page-title .title-wrapper{ padding: 0 20px }
        #page-title h1.thetitle{
        font-size: 16px;
        line-height: 20px;
    }
}
4

3 回答 3

10

您可以在 head 标签中使用此代码：

<meta name="viewport" content="width=device-width, initial-scale=1"/>
于 2012-10-09T14:07:52.840 回答
2

再看一遍，当使用我的 iPhone 4S 和 iOS 6 中引入的 Remote Web Inspector 时，我找不到下面任何样式的任何样式max-width: 1200px，即使它们在 CSS 文件中。我不知道这是为什么。

另外，几个月前我写了一篇关于响应式设计和媒体查询的博文，如果你愿意，可以在这里阅读。并不是说你不擅长媒体查询（这是一个非常好的网站！）只是希望这对你来说会是一个有趣的阅读:)

编辑：再次查看您的网站，我注意到head（在底部）您有以下代码：

meta name="viewport" content="width=1100"

这可能就是为什么样式在屏幕宽度低于 1100 像素或 1200 像素时无法应用的原因。把这个拿出来再试一次。

于 2012-10-09T15:51:04.807 回答
-1

这可能与将 CSS 放在单独的文件中有关。作为一般规则，您应该始终将所有 CSS 写入一个文件 ( style.css)。它不应该这样做，只是为了清楚起见将它们放在同一个文件中，看看会发生什么。如果它不起作用对此发表评论，我会再看看。

于 2012-10-09T15:09:33.063 回答