时间戳

首页 > 解决方案 > CSS：即使添加了媒体查询，移动设备上的 div 仍以与桌面相同的宽度显示

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

问题描述

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

.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>

标签： cssmedia-queries

解决方案

也许如果为小型设备制作媒体查询

推荐阅读