通过@Media查询更新根字体大小（因此REM），响应敏感的尾风CSS？

Question

我一直在我的 Vue 项目中使用 tailwind，总体来说它非常好，但是总是写 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>

请参阅下面的链接以获取更多信息

字体大小

响应式设计

Answer 2

我成功地将以下内容添加到 globals.css 中。

@tailwind base;


@layer base {
  html {
    font-size: 10px;
    @media screen(lg) {
      font-size: 15px;
    }
    @media screen(2xl) {
      font-size: 20px;
    }
  }
}

Answer 3

我认为这不是一个好主意，因为更改根字体大小会影响使用 rem 单位的 tailwind 的所有属性，不仅仅是宽度，还有填充、边距、字体大小、间隙等。只需一个断点更改就可能导致整个应用程序发生重大变化，从而使预测和控制布局的响应能力变得更加困难。

全球影响示例

html {
  font-size: 16px; // 1rem = 16px
}
@media screen and (min-width: 1024px) {
  html {
    font-size: 24px; // 1rem = 24px at viewport widths of 1024px and above
  }
}

考虑此组件旨在具有中等字体大小、中等填充和下边距：

<div class="text-base p-4 mb-6">...</div>

• 断点之前：低于 1024 像素，

  • 文本基可能是 16px
  • p-4 导致所有边的内边距均为 16 像素
  • mb-6 给出 24px 的下边距（假设默认 Tailwind 比例 mb-6 为 1.5rem）..

• 断点之后：高于 1024px，根字体大小增加到 24px，

  • text-base 可能会意外缩放至 24px
  • p-4 将导致 24 像素内边距（而不是 16 像素）
  • mb-6 给出的下边距为 36px (1.5rem * 24px)。

后果

• 在更宽的视口中，组件可能会显得更大或占用比预期更多的空间，从而导致不可预测的布局变化。
• 缩放效果适用于所有使用 rem 单位的元素，导致无法控制哪些元素在某些断点处调整大小以及调整多少！

Answer 4

如果将其设置为 html {，则需要一个全新的间距量表。因为 rem 是根据＆lt; html＆gt; 标签的大小设置计算的。将其设置为主体{，就可以。

body {
  @apply lg:text-lg;
}

Answer 5

对于您的问题而言，这可能为时已晚，但是在搜索了相同的问题之后，我认为最好的方法应该是评论。

对于不想带有链接的另一个领域的人：我们将一些规则添加到 tailwind.css 文件：

html {
  font-size: 16px;
  @screen md {
    font-size: 17px;
  }
  @screen lg {
    font-size: 26px;
  }
}

tailwind出于某种原因而使用 rem ，而字体大小我们在这里修改本质上是它。

一些笔记您应该很明显，例如更改HTML字体大小可能会导致某些（意外？应该是预期的）行为，例如：当我们将字体大小更改为14px时， w-4 将以 w- [14px] 而不是往常而生效。

另一个注意事项是您添加这些代码的CSS文件的名称将取决于您导入的尾风。我强调了这一点，因为我已经看到许多不同的路径名被提及了混乱的水平。