顺风响应能力反向工作
我已经添加了类
"flex",
"justify-between",
"flex-wrap",
"items-center",
"sm:flex-col",
到我的div当我的窗口在普通桌面视图中加载时我的sm类被激活并且flex变成了flex-col当我切换到响应式移动视图时它会切换回桌面视图并使用flex-row
为什么会这样?
我只是想让flex行窗口视图和flex-col移动
这是因为顺风适用于移动优先断点系统。简单来说就是反向引导。并按预期工作
根据文档:
默认情况下,Tailwind使用一个移动优先的断点系统,类似于你在Bootstrap等其他框架中使用的断点系统。
这意味着无前缀的实用程序(如uppercase)在所有屏幕尺寸上生效,而带前缀的实用程序(如md:uppercase)仅在指定的断点及以上生效。
更新代码:
"flex",
"md:justify-between",
"md:flex-wrap",
"md:items-center",
"flex-col",
这将在md:
断点以下的任何屏幕中影响column
。wrap
对以上md:
断点的影响