Html 使用和逻辑运算符使用多个CSS媒体查询未按预期工作

我已将以下媒体查询添加到我的代码中：

@media screen and (min-width: 700px) and (max-width: 800px){
    body {
        margin: 50px;
    }

    body, p {
        font-size: 1.6rem;
        font-size: 16px;
    }

    #title {
        font-size: 4rem;
        font-size: 40px;
    }
}

但是，当在macBook 13中显示页面时，屏幕的最大宽度大于800px，样式仍然遵循上面的媒体查询，而不是媒体查询之外的代码

以下是指向GitHub repo的链接，其中包含完整的HTML和CSS代码：

这是一个单页的项目

---

谢谢。

媒体查询对大小变化和差异非常敏感。因此，一个可能的解决方案是为所有设备输入媒体查询，而不是只输入一个。这使您可以使程序对大小更改做出更大的响应，并使程序不会混淆用户可能拥有的不同大小

我喜欢使用此网站进行媒体查询，以说明所有屏幕分辨率和大小：

另外，确保将

放在

标记中，使其更具代表性。

确定。我发现了这个问题：

除了我发布的关于这个问题的媒体查询外，我还有一个问题摆在我面前：

@media screen and (min-width: 300px){
    body {
        background-color: #605853;
        margin: 0px;
        font-size: 100%;
    }

    p, p.definition {
        font-size: 1em;
    }

    #title {
        font-size: 1.250em !important;
    }

    .form-control{
        height: 3rem;
    }

}

现在我知道我应该把两者都包括进去。我的错

当页面大于800px时，它默认为第一个媒体查询，而不是遵循常规CSS代码的页面，因为我只指定了最小宽度。解决此问题的一种方法是为第一个媒体查询添加最大宽度。这解决了问题：

@media screen and (min-width: 300px) and (max-width: 699px)

我将阅读更多关于媒体查询的内容，因为我不确定这是否是处理小屏幕的最佳方式。感觉太宽了

---

谢谢大家的回复

我不明白的是为什么需要一个700px和800px之间的查询。如果在此范围内有一个断开的部分，则表明html或css代码有错误。我建议你检查一下你所有的员工。我还建议对媒体查询范围使用位于引导程序自己站点上的断点。您必须了解媒体查询，如果

max width

为800px，而

min width

则意味着您的代码只能在700px宽、不超过800px宽的屏幕上工作/运行，macbook 13比800px宽得多。@dippas当你说代码不能在800px宽的屏幕上工作时，你的意思是只有me media query内部的代码或media query外部的所有CSS代码。在阅读了MDN关于媒体查询的文档后，我的理解是，对于大于800px的屏幕，媒体查询之外的CSS代码将适用。@LaneyFran很抱歉没有解释清楚，我指的是特定媒体查询中的所有代码这是一个错误的建议

，因此一个可能的解决方案是键入所有设备的媒体查询，而不是只键入一个
@dippas，这很有趣，因为答案中提供的文章警告您不要这样做。@ZohirSalak您相信您在网上阅读的所有内容吗？顺便说一句，这篇文章至少有4年历史了，所以是的，我支持我的观点opinion@dippas我想你误解了我说的话我能给你一个建议吗？？不要将媒体查询与
min
和
max
同时使用，因为这会缩小范围，并会使您创建大量媒体查询，让内容决定您需要使用哪些断点/媒体查询，或者使用移动优先方法（仅限最小宽度）或者使用
max.width