文章/答案/技术大牛

发布

社区首页 >问答首页 >已经存在的HTML组件(h1，h2，h3.)Web和移动设备的大小

问已经存在的HTML组件(h1，h2，h3.)Web和移动设备的大小
EN

Stack Overflow用户

提问于 2022-11-19 14:25:51

回答 1查看 30关注 0票数 0

我在一个项目中使用了Next.js，我想检查如何在桌面(1440 on )上将h1字体大小从40 on覆盖到46 on，并在移动web (375 On)上再次重写它的字体大小从40 on到30 on。

我尝试在tailwindcss.config文件中添加一个新属性

fontSize: {
  h1: '46px',
  h2: '40px',
},

但我找不到办法在手机上做。

我曾经用下面的方式在普通的css文件中这样做

h1{
  font-size:46px
}

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

回答已采纳

发布于 2022-11-20 12:03:45

按照顺风的建议，您应该在全局样式文件的基本层中添加这些样式，它应该如下所示

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

由于默认情况下，尾风使用的是移动第一断点系统，因此我在(如果需要，可以在tailwind.config文件中添加自定义断点)之后添加了移动屏幕的大小和大屏幕的断点。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74500839

复制

相似问题

问已经存在的HTML组件(h1，h2，h3.)Web和移动设备的大小EN