媒体查询不考虑大小

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 像素的屏幕尺寸。