因此,我一直在尝试找到一种方法来使我的自定义实用程序(例如,padding-root-inline
响应屏幕尺寸)。到目前为止,我知道我可以做这样的事情-
@layer utilities {
.padding-root-inline { ... }
.padding-root-inline-sm { ... }
}
然后使用这样的屏幕修改器-
<section class="padding-root-inline max-sm:padding-root-inline-sm"></section>
但这似乎仍然不方便,因为我必须在使用它的每个组件中编写变体类和基类。我想要的是这样的-
@layer utilities {
@media all and (max-width: theme('screens.xs')) {
.padding-root-inline {
padding-inline: calc(theme('padding.root-inline') - 2rem);
}
}
}
这样我就可以说padding-root-inline
,它会自行响应,而不需要说sm:padding-root-inline-sm
。
您可以在自定义实用程序中直接定义媒体查询: