如何创建响应式 H3 文本

Question

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

PS。我想让 "INDIA" 在后台响应。

Image of page

Answer 1

您可以在 CSS 中使用 vw 因为它的字体大小。

VW 表示 "viewport width"。

基本上，视口就是浏览器的大小 window。所以这将使 1vw 等于视口宽度的 1%。

因此，您可以将 css 中的字体大小更改为：

.wellcome-heading > h2 {
  font-size: 12vw;
  color: #ffffff;
  font-weight: 700;
  position: relative;
  z-index: 3;
}

Answer 2

您可以在 css 中使用 vw 或 vh:

h3 {
  font-size: 5vw;
}

vw unit - Equal to 1% of the width of the initial containing block.

vh unit - Equal to 1% of the height of the initial containing block.

另请参阅：

Answer 3

仅当屏幕宽度小于 1024px 时，您才可以使用 视口宽度 单位设置字体大小样式。

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

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

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

Answer 4

<h1>Title</h1>
<h3>Another title</h3>

body {
  background-color: white;
}

h1 {
  font-size: 10vh;
}

h3 {
  font-size: 10vw;
}

您可以使用 vw 作为字体大小，根据用户宽度调整字体大小，使用 vh 作为高度。

抱歉，如果没有多大意义，请先在这里回答。更容易查看 fiddle.

How to create a responsive H3 text