next.js 在Web和移动的上覆盖现有HTML组件(h1、h2、h3 ...)大小

ssgvzors 于 2022-11-23 发布在其他

关注(0)|答案(1)|浏览(151)

因此，我使用Tailwindcss与Nextjs上的一个项目，我想检查我如何可以覆盖H1字体大小从40 px到46 px例如在桌面（1440 px），并再次覆盖它的字体大小从40 px到30 px在移动的网页（375 px）.

i have tried adding a new property in the Tailwindcss.config file

字体大小：{ h1：“46px”，h2：'40像素'，}，

but i can't find a way to do it on mobile.

我曾经在一个普通的css文件中这样做
h1{字体大小：46 px}

@media only screen and (max-width: 375px) {
  h1{
font-size: 30px;
}
}

1条答案

根据tailwind的建议，您应该将这些样式添加到全局样式文件的基础图层中，其外观应如下所示

@layer base {
  h1 {
    @apply text-3xl lg:text-5xl;
  }
}

由于默认情况下，Tailwind使用的是mobile-first断点系统，因此我添加了mobile的size和large screen after的断点（如果需要，可以在tailwind.config文件中添加自定义断点）