媒体查询无法正常工作

Question

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

Answer 1

如果您的媒体查询设置为@media(min-width:400px)，那么它将影响屏幕尺寸大于400px的所有元素，因为它设置为＆＃34; min（imum）-width＆＃34;。

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

每个例子，如果你设置：

h1 { color: red; }

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

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

你的h1在任何600px以下（因为它是默认值）都会显示为红色，600px及以上时为黑色，900px及以上时为白色。