css - 媒体查询适用于 Inspector 但不适用于现场

Question

自定义 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"/> "> Gedichte '邮政'， 'posts_per_page' => 2, ); $Gedichteposts = new WP_QUERY($args); while($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> 

Answer 1

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

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