html - 如何创建响应式 H3 文本

Question

如何创建具有设备视口(viewport)宽度的响应式标题。 这是我要添加响应式文本标题的页面的链接。 Link to page

附言。我想让背景中的“INDIA”响应。

Image of page

Answer 1

只有当屏幕宽度小于 1024 像素时，您才可以使用视口(viewport)宽度 单位来设置字体大小的样式。

这将确保字体大小在大屏幕上保持 332px，并在屏幕宽度小于 1024px 的较小设备上正确缩放

.wellcome-heading > h3 {
    font-size: 332px;
}

@media(max-width:1023px)
{
 .wellcome-heading > h3 {
    font-size: 30vw;
 }
}