為什么我在媒體查詢中的選擇器不起作用

Question

在 css 文件中，我有一個針對寬度低於 500px 的任何設備的媒體查詢

@media all and (max-width: 500px) {
  .wrapper {
    display: flex;
  }
}

不過對它沒有任何影響

  <div class="wrapper">

有幾個人說它工作正常。 我附上了一個屏幕截圖，以表明它實際上不起作用。

我不知道哪里出了問題。

另一個問題是，兩者有什么不同

@media all and (max-width: 1000px) {
}

和

@media (max-width: 1000px) {
}

我在媒體查詢的例子中都看到過。

Answer 1

媒體查詢不適用，因為有效瀏覽器寬度不夠小。

添加

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

……到<head> 。

如果沒有它，移動瀏覽器（以及模擬它們的工具）將假定該設計僅適用於桌面瀏覽器，並將縮小以模擬具有桌面寬度的屏幕。

請參閱MDN以進一步閱讀。