如何在Tailwind中对高度和宽度应用媒体查询？

Question

我想使用Tailwind做类似这样的事情，

@/media screen and (max-width: 995px) , screen and (max-height: 700px) { ... }

这可行吗？

- user11828577

Answer 1

解决方案：

screens: {
    'custombp': {'raw': '(max-height: 1234px),(min-width:920px)'}
}

_{代表问题提问者添加。}

- anon

---

这感觉像是Tailwind的语法问题，因为原始CSS使用and，而且应该有and，因为raw意味着它只是盲目地将其粘贴到输出中，并在前面加上@media... - Justin

您提供的代码作为逻辑“或”而不是逻辑“与”运行。 - Justin

Answer 2

如上所述，您可以使用raw根据高度和宽度创建细粒度的断点。这是一个链接，指向相关文档，我在阅读上述答案后才找到的。

https://tailwindcss.com/docs/screens#custom-media-queries

- Paul Clark

Answer 3

我解决了这个特定的问题，你可以像这样做，

``` screens: { 'custom-height-mq': { 'raw': '((max-width: 995px) and (max-height: 700px))' }, } ```

同样，你可以应用任何媒体查询。你也可以使用其他逻辑运算符，如and、or等。

- Syed Zubair

Answer 4

在你的 tailwind config .js 文件中，你可以添加类似这样的内容。请参考 断点 链接，那里有其他可供学习的示例。

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

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

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

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

- Digvijay

---

这并没有回答发帖者的问题，他想知道如何在tailwind配置中添加多个媒体断点。我认为你甚至没有读到问题，只是盲目地从文档中复制了内容。 - Justin