基于@media查询更新根字体大小(例如rem)响应尾风css？

Question

我一直在我的Vue项目中使用顺风，总的来说它确实很好，但是总是为我的所有类编写sm:w-10 lg:w-10 2xl:w-30 (等等)有点烦人。

所以我在想，因为宽度是基于rems的，所以只更新lg xl 2xl断点的根字体大小(这决定rem值)，而不是在每个标记上重置它们，难道不是更有意义吗？

我想我可以在根组件上实现这样的目标：

html { // changed from body to html
    font-size: 16px;


@media screen and (max-width: 1024px) {
  html { 
    font-size: 24px;
  }
}

但我对此持怀疑态度，因为Tailwind文档根本没有提到这一点。有人能告诉我这是不是个坏主意吗？

Answer 1

只需将其添加到父类，然后应用相同的文本修饰符。

当所有子div的屏幕宽度增加时，下面的例子增加了文本的大小。

<div class='text-base md:text-lg lg:text-lg xl:text-xl'
  ... All text content inside here will responsively change size
</div>

有关更多信息，请参见下面的链接

字体大小

响应设计