引导断点在 React Bootstrap 中不起作用

Question

我正在使用 react Bootstrap。我设计了一个布局，我想在小屏幕上进行重构。我想做的就是，在某些断点处，我希望我的 h3 元素和图像调整大小。我一直在使用以下内容：

index.css 中的代码：

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { 
    .thumbnailImg{
    width: 30%;
    }

    h3{
        font-size: 1rem;
    }
 }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { 
    .thumbnailImg{
    width: 35%;
    }

    h3{
        font-size: 1rem;
    }

     }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
    .thumbnailImg{
    width: 40%;
    }

    h3{
        font-size: 1.5rem;
    }

}

现在由于某些原因，没有一个断点起作用。 h3 始终保持 1.75 rem。不仅是 h3 元素，而且图像也没有按照定义调整大小。谁能告诉我我在这里做错了什么。

这是我一直使用这种样式的组件：

import React from 'react';
import { Image } from 'react-bootstrap';
import './index.css';

export const MyIcons = ({source,name}) => (
        <div className="col-sm-4 addMargin50 text-center">
            <Image className="thumbnailImg" src={ process.env.PUBLIC_URL + source } alt={name} roundedCircle />
            <h3 className="font-nunito text-uppercase"> {name} </h3>
        </div>
    )

我还尝试创建一个单独的类来定义不同断点上的字体大小，并将该类添加到我的图像和 h3 元素中，但是它们都没有工作。

Answer 1

问题不是反应，而是您的媒体查询的顺序。如果您有重叠的规则，它将始终选择被删除的最终规则。如果你颠倒你的媒体查询的顺序，你应该得到你想要的。

我已编辑此答案以使其更清晰。

您应该从最大的设备到最小的设备对媒体查询进行排序。

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .thumbnailImg{
    width: 40%;
    }

    h3{
        font-size: 1.5rem;
    }

}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) { 
    .thumbnailImg{
    width: 35%;
    }

    h3{
        font-size: 1rem;
    }

     }



/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
    .thumbnailImg{
    width: 30%;
    }

    h3{
        font-size: 1rem;
    }
 }

https://jsfiddle.net/txL5chk0/2/

另外，我确信我不需要告诉您，您的 css 文件中的 cmets 不是 CSS 中的有效 cmets，不应包含在您的代码中......