媒体查询在 Inspector 上工作，但不在现场答案

【问题标题】：Media queries are working on Inspector but not on live site媒体查询在 Inspector 上工作，但不在现场
【发布时间】：2020-02-23 06:16:30
【问题描述】：

自定义 css（媒体查询）适用于 WordPress 和检查器，但不适用于实时站点。

我在 HTML 中添加了 meta viewport 标记，但它仍然无法正常工作。

/* Media Queries */

/* small phones */

@media (max-width: 320px) {
  #intro {
    margin-left: 20px;
    width: 85%;
  }
  .logo-image {
    position: relative;
  }
  .logo-img {
    display: none;
  }
  main {
    width: 85%;
    position: relative;
    top: 0px;
  }
  .card {
    width: 85%;
  }
  .card .card-image img {
    width: 100%;
  }
  footer {
    flex-direction: column;
    text-align: center;
  }
  footer #left-footer {
    flex: 1;
    border-right: 0;
    padding-left: 0;
  }
  footer #right-footer {
    background: #eee;
    color: black;
  }
  footer #right-footer a {
    color: black;
  }
  footer #social-media-footer ul li:hover a .fa-instagram {
    color: purple;
    transition: 0.4s;
  }
  nav ul {
    display: none;
  }
  #menu-icon {
    display: flex;
  }
  #slideout-menu {
    display: block;
    text-align: center;
  }
  #searchbox {
    display: none;
  }
  #blogpost {
    width: 100%;
    border-left: 0;
  }
  #sidebar {
    display: none;
  }
  .comment-form {
    width: 70%;
  }
}

@media (max-width: 320px) {
  #slideout-menu {
    width: 65%;
  }
  #logo-img {
    display: none;
  }
  #intro {
    width: 95%;
    height: 120vw;
  }
  #intro .logo-image {
    width: auto;
    height: auto;
    max-width: 680px;
    max-height: 750px;
    position: relative;
    right: 18px;
    top: 50px;
  }
  main {
    width: 95%;
    margin-top: 0px;
  }
  .card {
    width: 95%;
  }
  .card .card-image img {
    width: 100%;
  }
  .logo-img {
    display: none;
  }
  .card .card-description {
    width: 100%
  }
}

@media (min-width: 375px) and (max-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
  #nav ul {
    display: none;
  }
  #slideout-menu {
    width: 65%;
  }
  #logo-img {
    display: none;
  }
  #intro {
    width: auto;
    height: 120vw;
  }
  #intro .logo-image {
    width: auto;
    height: auto;
    max-width: 800px;
    max-height: 750px;
    position: relative;
    right: 5px;
    top: 50px;
  }
  main {
    width: 85%;
    margin-top: 0px;
  }
  .card {
    width: 95%;
  }
  .card .card-image img {
    width: 100%;
  }
  .logo-img {
    display: none;
  }
  .card .card-description {
    width: 100%
  }
  nav ul {
    display: none;
  }
  #menu-icon {
    display: flex;
  }
  #slideout-menu {
    display: block;
    text-align: center;
  }
  #searchbox {
    display: none;
  }
  #sidebar {
    display: none;
  }
  #comments-section {
    width: 140%;
  }
}

@media (min-width: 720px) {
  .logo-image {
    display: flex;
  }
  main {
    width: 95%;
  }
  .card {
    width: 45%;
  }
  .card .card-image img {
    width: 100%;
  }
}


/* Tablet */

@media screen and (min-width: 668px) and (max-width: 768px) {
  nav {
    font-size: 2vw;
  }
  #logo-img {
    height: auto;
    width: auto;
    max-width: 680px;
    max-height: 750px;
  }
  #intro {
    width: auto;
    height: 100vw;
  }
  #intro .logo-image {
    width: auto;
    height: auto;
    max-width: 1500px;
    max-height: 1000px;
    position: relative;
    right: 10px;
    top: 10px;
  }
  main {
    width: 95%;
  }
  section {
    flex-direction: column;
  }
  .card,
  .card .Card Image img {
    width: 100%;
  }
  footer {
    flex-direction: column;
    text-align: center;
  }
  footer #left-footer {
    flex: 1;
    border-right: 0;
    padding-left: 0;
  }
  footer #right-footer {
    background: #eee;
    color: black;
  }
  footer #right-footer a {
    color: black;
  }
  footer #social-media-footer ul li:hover a .fa-instagram {
    color: purple;
    transition: 0.4s;
  }
  #searchbox {
    display: ;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
  nav ul {
    display: flex;
    list-style: none;
    padding: 0 150px;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    margin: 0;
  }
  #logo-img {
    left: 30px
  }
  .logo-image {
    display: flex;
  }
  main {
    width: 95%;
  }
  .card {
    width: 45%;
  }
  .card .card-image img {
    width: 100%;
  }
}


/* ----------- Retina Screens ----------- */

@media screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
  #logo-img {
    left: 30px
  }
  .logo-image {
    display: flex;
  }
  main {
    width: 95%;
  }
  .card {
    width: 45%;
  }
  .card .card-image img {
    width: 100%;
  }
  #logo-img {
    height: auto;
    width: auto;
    max-width: 680px;
    max-height: 750px;
  }
  #intro {
    width: auto;
    height: 100vw;
  }
  #intro .logo-image {
    width: auto;
    height: auto;
    max-width: 2500px;
    max-height: 1000px;
    position: relative;
    right: 10px;
    top: -200px;
  }
  main {
    width: 95%;
  }
  section {
    flex-direction: column;
  }
  .card,
  .card .Card Image img {
    width: 100%;
  }
  footer {
    flex-direction: column;
    text-align: center;
  }
  footer #left-footer {
    flex: 1;
    border-right: 0;
    padding-left: 0;
  }
  footer #right-footer {
    background: #eee;
    color: black;
  }
  footer #right-footer a {
    color: black;
  }
  footer #social-media-footer ul li:hover a .fa-instagram {
    color: purple;
    transition: 0.4s;
  }
  #searchbox {
    display: ;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
  nav ul {
    display: flex;
    list-style: none;
    padding: 0 200px;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    margin: 0;
  }
  #logo-img {
    left: 30px
  }
}

这里是 HTML

"> /img/fuchsifuchs.png" alt="fuchsifuchs.png" class="fuchs-intro"/> "> 格迪克特 '邮政'， 'posts_per_page' => 2, ); $Gedichteposts = 新的 WP_QUERY($args); 而($Gedichteposts->have_posts()) { $Gedichteposts->the_post(); ?> "> " alt="卡片图片"> ">

" class="btn-readmore"> 韦特尔昆登

        </section>

    <a href="<?php echo site_url('/projects'); ?>">
    <h2 class="section-heading"> Kurzgeschichten</h2>

    <section>
    <?php 

        $args = array(
        'post_type' => 'project',
        'posts_per_page' => 2,
        );

        $project = new WP_QUERY($args);

        while($project->have_posts()) {
        $project->the_post();


        ?>

        <div class="card">
            <div class="card-image">
                <a href=" <?php echo the_permalink(); ?>">
                    <img src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>"
                    alt="Card Image">
                </a>    
        </div>

        <div class="card-description">
            <a href="<?php the_permalink() ?>">
                <h3><?php the_title(); ?></h3>
            </a>
            <p><?php echo wp_trim_words(get_the_excerpt(), 30); ?>
            </p>
            <a href="<?php the_permalink(); ?>" class="btn-readmore"> weiter erkunden</a>
        </div>
        </div>

        <?php } 
        wp_reset_query();
        ?>

        </section>

    <a href="<?php echo site_url('/about'); ?>">
    <h2 class="section-heading"> Das bin ich</h2>

    <section id="section-source">
        <p>
        Wenn Ihr mehr über mich und meine Geschichte erfahren wollt, schaut gerne hier rein. Ich erzähle euch, wie es zu diesem Blog gekommen ist und warum ihr rein schauen solltet.
        </p>
        <a href="https://www.instagram.com/fabiancheves8/" class="btn-readmore">Instagram Profil</a>
    </section>

【问题讨论】：

欢迎来到 Stack Overflow！你的 HTML 在哪里？没有那个人怎么能测试这个？请阅读：How to create a Minimal, Complete, and Verifiable example 最后还有一个额外的右括号。
您好，首先感谢您的帮助，我会尽快添加我的Html。很抱歉给您带来不便
感谢您发布更多信息。请发布呈现的 HTML，而不是 PHP。
好的，再次抱歉！我希望这是我要发布的渲染代码，如果我错了请纠正我

标签： css media-queries responsive

【解决方案1】：

我在尝试从 WordPress 管理面板编写 css 时遇到的一个常见问题是我的 css 被覆盖了。为了解决这个问题，您可以尝试匹配已经存在的 css 的特异性，或者如果您很勇敢，只需在“;”之前添加“！important”每一条规则。

不过，建议先研究一下特异性。

【讨论】：

这更像是一个评论而不是一个答案——因为我们没有足够的信息来接近提供答案。我会删除它（在它被否决之前）并将其添加为评论。
@disinfor 如果我没有提供正确的信息，我很抱歉。我真的是一个初学者。你需要什么来提供答案？我知道您可能没有时间回答这个问题，但我仍然希望能得到任何帮助