时间戳

首页 > 解决方案 > 媒体查询在 Tailwind CSS 中不起作用

html - 媒体查询在 Tailwind CSS 中不起作用

问题描述

TailWind CSS 中的媒体查询无法正常工作。

我的代码是这个

<img src={MYIMAGE} alt="Test Image" className="h-6 w-8 rounded-md gfold:h-8 gfold:w-14 gfold:rounded-xl sm:h-16 sm:w-24 " />

gfold-> (400px)- 我在tailwind.config.js文件中包含的媒体大小。
sm-> (640px)- Tailwind 附带的默认媒体大小。

当媒体尺寸低于sm尺寸时是正确的，但是当我的屏幕大于sm尺寸时，尺寸不会改变。

现在我该怎么办？请帮助我，我是 Tailwind CSS 的新手。

标签： htmlcsswebtailwind-css

解决方案

首先使用tailwind css，媒体查询用于大屏幕，默认css适用于移动设备，所以请记住这一点

我建议使用 tailwind 定义的标准断点，而不是覆盖配置文件，

   <img src={MYIMAGE} alt="Test Image" className="h-6 w-8 rounded-md md:h-full md:w-full" />

当屏幕大于 768 像素时，这会将图片设置为全尺寸。

还要确保在 tailwindcss 中定义新断点时将以下内容添加到配置文件中

const defaultTheme = require('tailwindcss/defaultTheme')

 module.exports = {theme: {screens: {'gfold' :'400px' ,...defaultTheme.screens},}}

您可以在以下位置检查如何使用媒体查询进行顺风逻辑：https ://learnjsx.com/category/1/posts/mediaQueries

推荐阅读