Css 响应媒体查询

我现在很困惑，所以我试图创建一个响应性强的网站

出于某种原因，我的媒体查询没有触发？我有下面的CSS，它的工作从X-Small到480px到575.98px都很好。但在媒体查询之后，我添加到767.98px范围中的任何内容都不起作用

@media only screen and (min-width : 480px) {
    .card-4{
        display: none;
    }
}
@media (max-width: 575.98px) {
    #about{
        padding: 0 0.5rem 0 0.5rem;
    }
    .about-photo img{
        width: 70%;
    }
    .about-text{
        margin: auto;
        text-align: center;
        padding: 1rem 0 3rem 0;
    }
    .about-text h1, .about-text p{
        text-align: center;
        float: none;
    }
    .table{
        margin: 0;  
        padding-left: 0;
    }
    .table li{
        margin: auto;
        padding-top: 0.3rem;
        padding-left: 2rem;
        text-align: left;   
    }
    #skills-list{
        margin: 0 2rem 0 2rem;
    }
    #skills-list li{
        text-align: left;
        padding-bottom: 1rem;   
    }
    .card-1{
        display: none;
    }
    .card{
        margin-left: auto !important; 
        margin-right: auto !important;
        text-align: center;
    }
    .cards-container{
        margin: 0 !important;
    }
    .timeline > li > .timeline-panel {
    width: 85%;
    float: right;
    padding: 1.2rem;
}
    .timeline:before {
    left: 6%;
}
    .timeline > li > .timeline-badge {
    width: 44px;
    height: 44px;
    left: 6%;
}
.timeline > li > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
}
.timeline > li > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}
.square-1-text, .square-2-text, .square-3-text{
    height: 31rem;
}
.square-1{
    order:1;
}
.square-1-text{
    order:2;
}
.square-2{
    order:3;
}
.square-2-text{
    order:4;
}
#passions-section{  
    padding-bottom: 0;
}
#skills-list li.i{
        list-style-position: outside !important;
        display: none;
    }
/*// Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
    }

/*// Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {

}

/*// Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {

}

---

在实现完全响应的站点时，在CSS媒体查询中使用正确的断点可能是最重要的决定

最小宽度：320px（更小的手机视点） 最小宽度：480px（小型设备和大多数手机） 最小宽度：768px（大多数片剂） 最小宽度：992px（较小的桌面视点） 最小宽度：1200px（大设备和宽屏幕）

就你的情况来说，试试这个

@media (min-width:500px) and (max-width:750px)

---

在实现完全响应的站点时，在CSS媒体查询中使用正确的断点可能是最重要的决定

最小宽度：320px（更小的手机视点） 最小宽度：480px（小型设备和大多数手机） 最小宽度：768px（大多数片剂） 最小宽度：992px（较小的桌面视点） 最小宽度：1200px（大设备和宽屏幕）

就你的情况来说，试试这个

@media (min-width:500px) and (max-width:750px)

---

到底是什么不起作用？我问了一个问题，到底是什么不起作用？我做了一个啊哈谢谢你，我将勾选你的答案，因为它解决了我的问题，但是请你解释一下最小/最大宽度之间的区别，因为我不知道该使用哪个和为什么。

max

=低于金额的所有-

min

高于金额的所有内容使用最小值优于最大值吗？如果是这样的话，为什么？它通常针对已知宽度的特定设备。啊，谢谢你，我将勾选你的答案，因为它解决了我的问题，但是请您解释一下最小/最大宽度之间的区别，因为我不知道该使用哪种宽度以及原因。

max

=低于金额的所有内容-

min

高于金额的所有内容使用最小值优于最大值吗？如果是，原因是什么？它用来瞄准具有已知宽度的特定设备。