如何使用 Tailwind 将媒体查询应用于高度和宽度？

Posted 2023-03-07

【中文标题】如何使用 Tailwind 将媒体查询应用于高度和宽度？

【英文标题】：How can I apply a media query to height and width using Tailwind?

【发布时间】：2020-09-06 22:33:57

【问题描述】：

我想用 Tailwind 做这样的事情，

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

有可能吗？

【参考方案1】：

解决方法：

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

_{代表提问者添加。}

【参考方案2】：

在您的 tailwind 配置 .js 文件中，您可以添加类似这样的内容。关注breakpoints链接，还有其他例子可以学习。

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)  ...