为什么我的媒体查询不适用于此特定元素？

Question

我的媒体查询并未应用于此，div .col-3尽管它确实适用于其他媒体查询。这是选择器/类的问题吗？@media screen and (min-width: 600px) and (max-width: 719px) {   .col-3 {          flex: 0 50%;          max-width: 50%;  }  }<div class="row fade show">    <div class="col-3">        <div class="ProductBox_root__13DPQ">            <div class="ProductBox_photo__Xs8BM"><img                    src="https://images.pexels.com/photos/245208/pexels-photo-245208.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=3&amp;h=750&amp;w=1260"                    alt="Aenean Ru Bristique 1" class="ProductBox_image__1ECK5">                <div class="ProductBox_sale__1WcD7">sale</div>                <div class="ProductBox_buttons__uyJNx"><a href="#" class="Button_small__2W39u">Quick View</a><a href="#"                        class="Button_small__2W39u"><svg aria-hidden="true" focusable="false" data-prefix="fas"                            data-icon="shopping-basket" class="svg-inline--fa fa-shopping-basket fa-w-18 " role="img"                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">                            <path fill="currentColor"                            </path>                        </svg> ADD TO CART</a></div>            </div>让我确认一下我添加了<meta name="viewport" content="width=device-width, initial-scale=1.0" />所以一定是别的东西。

Answer 1

希望这个媒体查询放在你的 CSS 文件的底部。如果不是，则属性将被覆盖。请检查并检查 css 选项卡中元素的属性是否被覆盖

Answer 2

我决定通过向 React 组件添加响应类来应用 RWD，如下所示：

className='col-12 col-sm-6 col-lg-3'>

这对我有用，我希望有人会发现这很有用。感谢您的所有回答！

Answer 3

图像溢出容器？

img{ width: 100% }




Answer 4

您还可以通过 Id 定位 div

<div id="custom" class="col-3">

  #custom.col-3 {

      flex: 0 50%;

      max-width: 50%;

      border: 2px solid red

   }

https://jsfiddle.net/brnt49je/