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

【问题标题】：CSS Media Query using multiple using the and logical operator not working as expectedCSS媒体查询使用多个使用和逻辑运算符未按预期工作
【发布时间】：2020-06-03 08:16:09
【问题描述】：

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

@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;
    }
}

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

这里是包含完整 HTML 和 CSS 代码的 GitHub 存储库的链接： MVP survey-form repo

这是一个单页项目。

谢谢。

【问题讨论】：

我不明白为什么你需要一个介于 700px 和 800px 之间的查询。如果您在此范围内有损坏的部分，则表明您的 html 或 css 代码有问题。我建议你检查你所有的员工。我还建议使用位于 bootstrap 自己的站点上的断点作为媒体查询范围。 getbootstrap.com/docs/4.5/layout/overview/…
你必须了解媒体查询，如果 max-width 是 800px 并且 min-width 这意味着你的代码只能在宽屏幕中工作/运行700px 不超过 800px，macbook 13 比 800px 宽。
@dippas 当您说该代码不适用于宽度超过 800 像素的屏幕时，您的意思是仅媒体查询内部的代码或媒体查询之外的所有 CSS 代码。在阅读了 MDN 关于媒体查询的文档后，我的理解是对于大于 800 像素的屏幕，媒体查询之外的 CSS 代码将适用。
@LaneyFran 很抱歉没有解释清楚，我的意思是特定媒体查询中的所有代码

标签： html css media-queries

【解决方案1】：

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

我喜欢使用这个网站进行媒体查询，以考虑所有屏幕分辨率和尺寸： https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

此外，请务必将 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 放入您的 <head> 标签中，以使其更具响应性。

【讨论】：

这是一个糟糕的建议So one possible solution is to type in media queries for all devices instead of just one。
@dippas 这很有趣，因为答案中提供的文章对此提出了警告。
@ZohirSalak 你相信你在网上读到的一切吗？顺便说一句，这篇文章至少有 4 年的历史了，所以是的，我坚持我的观点
@dippas 我想你误解了我的意思

【解决方案2】：

好的。我发现了问题：

除了我在这个问题上发布的媒体查询之外，我之前也有这个：

@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 代码的页面，它默认为第一个媒体查询，因为我只指定了 min-width。解决此问题的一种方法是在第一个媒体查询中添加一个最大宽度。这解决了这个问题：

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

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

感谢所有回复的人。

【讨论】：

我能给你一个建议吗？不要同时使用带有min 和max 的媒体查询，因为这会缩小范围，并且会让您创建大量媒体查询，让内容决定您需要哪些断点/媒体查询使用，要么使用移动优先方法（仅限最小宽度），要么使用非移动方法使用max.width