css - 媒体查询在我前进时不起作用

Question

我很想知道较小尺寸(例如 400 像素)的媒体查询如何控制 1400 像素桌面尺寸屏幕的元素。根据我对媒体查询的理解，它只应该在特定屏幕尺寸时触发。请有人帮我解决这个问题。

Answer 1

如果您的媒体查询设置为 @media(min-width:400px)，它将影响屏幕尺寸大于 400px 的所有元素，因为它设置为“min(imum)” -宽度”。

如果您希望它只影响 400px 和屏幕分辨率以下的元素，您可以使用 @media(max-width:400px)。

例如，如果您设置:

h1 { color: red; }

@media(min-width:600px) {
  h1 { color: black; }
}

@media(min-width:900px) {
  h1 { color: white; }
}

您的 h1 在 600 像素以下的任何地方都会显示为红色(因为它是默认设置)，在 600 像素及以上显示为黑色，在 900 像素及以上显示为白色。