基于 @media 查询更新根字体大小（因此 rem）的响应式 Tailwind css？

问题描述 投票：0回答：5

我一直在我的 Vue 项目中使用 tailwind，总体来说它非常好，但是总是为我的所有课程编写 

sm:w-10 lg:w-10 2xl:w-30
（等）有点烦人。

所以我在想，由于宽度是基于 rem 的，所以在 

lg xl 2xl
断点处更新根字体大小（决定 rem 值），而不是在每个标签上重置它们，不是更有意义吗？

我想我可以通过根组件上的类似方法来实现这一点：

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


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

但我对这样做持怀疑态度，因为 Tailwind 文档根本没有提到它。谁能告诉我这是否/为什么是一个坏主意？

css responsive-design tailwind-css
5个回答
1
投票

这对于您的问题可能为时已晚，但经过几次搜索相同的问题后，我认为最好的方法应该是这个评论。

对于那些不想通过链接进入另一个领域的人：我们在 

tailwind.css
文件中添加一些规则：

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

Tailwind 使用 

rem
是有原因的，而我们在这里修改的 
font-size
本质上就是它。

需要注意的是，更改 html font-size 可能会导致一些（意外？应该是预期的）行为，例如：当我们将 font-size 更改为 14px 时，

w-4
将生效为 
w-[14px]
而不是通常的 16px。

另一个注意事项是您添加这些代码的 css 文件的名称将取决于您导入 tailwind 的位置。我强调这一点是因为我看到很多不同的路径名被提到到了混乱的程度。

0
投票

只需将其添加到父类中，然后下面的所有内容都会应用相同的文本修饰符。

例如下面随着所有子 div 的屏幕宽度增加而增加文本大小

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

请参阅以下链接了解更多信息

字体大小

响应式设计

0
投票

我通过将以下内容添加到

globals.css
成功地做到了这一点。

@tailwind base;


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

我认为这不是一个好主意，因为更改根字体大小会影响使用 

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>

  • 断点之前：低于1024px，

    • text-base
      可能是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
    单位的元素，导致无法控制哪些元素在某些断点处调整大小以及调整多少！
0
投票

如果将其设置为 

html {
，则需要全新的间距比例。因为 
rem
是根据 
<html>
标签设置的大小计算的。将其设置为 
body {
就可以了。

body {
  @apply lg:text-lg;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.