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

2cmtqfgy  于 2023-04-08  发布在  其他
关注(0)|答案(3)|浏览(254)

我想和顺风一起做这样的事

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

这可能吗?

vecaoik1

vecaoik11#

解决方法:

screens: {
    'custombp': {'raw': '(max-height: 1234px),(min-width:920px)'}
}
  • 代表提问者添加。*
nxagd54h

nxagd54h2#

我已经解决了这个具体的问题,你可以这样做,
screens: { 'custom-height-mq': { 'raw': '((max-width: 995px) and (max-height: 700px))' }, }
同样,您可以应用任何媒体查询。您也可以使用其他逻辑运算符以及和或等。

hs1ihplo

hs1ihplo3#

在你的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) { ... }
    }
  }
}

相关问题