CSS：即使添加了媒体查询，移动设备上的 Div 仍显示为与桌面相同的宽度

Question

这个真的很奇怪。我在这个网站上有一个英雄区域 (https://dev-acupuncture.pantheonsite.io/)，它有两列 (div's)，桌面上的宽度为 50%，移动设备上的宽度应为 100%。但是，当我在移动设备上查看它时，div 仍然处于 50% 宽度，即使我设置了媒体查询使其成为 100%。像这样：

.hero-left, .hero-right { height: 500px; width: 50%; margin: 0; }
@media screen and (max-width: 1024px) {
    .hero-left, .hero-right { width: 100%; }
}

我检查了控制台，它看到了查询，但它似乎不想尊重它。所以一切都还在50%。真的很困惑为什么会这样。这是我对该区域的 HTML。

<section class="hero">
  <div class="hero-left" data-parallax="scroll" data-position-y="15px" data-image-src="<?php echo get_template_directory_uri(); ?>/img/hero.jpg">
    <div class="hero-content">
        <p>Text goes here.</p>
    </div>
  </div>
  <div class="hero-right">
    <div class="hero-right-top" data-parallax="scroll" data-position-y="15px" data-image-src="<?php echo get_template_directory_uri(); ?>/img/hero2.jpg">
        <div class="hero-content">
            <p>Text goes here.</p>
        </div>
    </div>
    <div class="hero-right-bottom" data-parallax="scroll" data-position-y="15px" data-image-src="<?php echo get_template_directory_uri(); ?>/img/hero3.jpg">
        <div class="hero-content">
            <p>Text goes here.</p>
        </div>
    </div>
</section>

Answer 1

也许如果对小型设备进行媒体查询

Answer 2

查看您的网站，您需要为 .hero 定义 flex-wrap class，以及在定义高度时使用 vh 而不是 px：

.hero {flex-wrap: wrap; height: 100vh;}

CSS：即使添加了媒体查询，移动设备上的 Div 仍显示为与桌面相同的宽度

CSS: Divs on mobile still appear at the same width as desktop even though media queries were added

css

media-queries