媒体查询不符合大小

Question

我很好奇我的媒体查询出了什么问题。我只想要一种样式用于“合理的小屏幕”，一种样式用于“合理的大屏幕”。所以我做了以下事情：

@media (min-width: 501px) {
    #courtName {
        font-size: 17px;
    }
    #courtInfoWindow {
        font-size: 13px;
    }
}

@media (max-width:500px) {
    #courtName {
        font-size: 64px;
    }
    #courtInfoWindow {
        font-size: 40px;
    }
}

我希望最小宽度尺寸显示在“大屏幕”上，最大宽度尺寸显示在小屏幕（小于500像素）上。但是，较小的尺寸显示在所有屏幕尺寸上。我尝试仅使用一个媒体查询来覆盖默认大小。尝试切换顺序。什么都没用。有什么作用？

Answer 1

在开始之前，请确保您的头部具有以下查看端口元。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

此后 请注意以下

@media (min-width: 501px) { /** CSS HERE **/ }  仅在大于501像素宽的屏幕上有效。

@media (max-width: 500px)  这仅适用于小于500像素宽的屏幕。