如何创建响应式H3文本

Question

如何使用设备视口宽度创建响应标题。 这是我要在其中添加响应式文本标题的页面的链接。 Link to page

PS。我想让“ INDIA”在后台响应。

Image of page

Answer 1

您可以在CSS中使用vw作为其字体大小。

VW表示“视口宽度”。

基本上，视口是浏览器窗口的大小。这样一来，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单位-等于初始包含块的宽度的1％。

     

vh单位-等于初始包含块的高度的1％。

另请参阅：

https://www.w3.org/TR/css3-values/#viewport-relative-lengths

Answer 3

仅当屏幕宽度小于1024像素时，才可以使用视口宽度单元设置字体大小的样式。

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

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

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

Answer 4

在此处查看jsfiddle-http://jsfiddle.net/imdd_/amrskpe6/

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

body {
  background-color: white;
}

h1 {
  font-size: 10vh;
}

h3 {
  font-size: 10vw;
}

您可以将vw用作基于用户宽度的连续字体大小的字体大小，而vh用作高度。

很抱歉，如果没有太大意义，请先在这里回答。更容易检查小提琴。