為什么 CSS 媒體查詢在我的 Tailwind/Svelte 項目中不起作用？

Question

我有一個使用 Tailwind CSS 進行樣式設置的 Svelte 項目。 我在@layer components {... }內的 Tailwind CSS 文件中添加了以下媒體查詢代碼：

@media only screen and (max-width: 1100) {
  .toggle {
    display: block;
  }
  header nav {
    display: none;
  }
}

但是當我改變瀏覽器的寬度時它不起作用。

我什至檢查了 inspect 元素，但它看起來好像媒體查詢甚至不存在於瀏覽器中。

為什么 CSS 媒體查詢不起作用，我該如何解決？

Answer 1

如果您希望當前代碼正常工作，您需要將“px”添加到媒體查詢中的最大寬度，如下所示：

media only screen and (max-width: 1100px)

但是，您不需要在 tailwind 中這樣做，更好的方法是將屏幕添加到您的 tailwind.config.js，如下所示：

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1100px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

在您的代碼中，您需要執行以下操作：

className='md:block hidden'

閱讀此頁面以獲取更多信息： https://tailwindcss.com/docs/screens

更新

使用媒體查詢時，最好使用移動優先方法 go 並使用最小寬度，而不是最大寬度