时间戳

首页 > 解决方案 > CSS媒体查询使用多个使用和逻辑运算符未按预期工作

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

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

这是 GitHub 存储库的链接以及完整的 HTML 和 CSS 代码： MVP 调查表存储库

这是一个单页项目。

谢谢。

标签： htmlcssmedia-queries

解决方案

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

我喜欢使用此站点进行媒体查询以考虑所有屏幕分辨率和尺寸： 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>标签以使其更具响应性。

推荐阅读