Как создать отзывчивый текст H3

Question

Как создать адаптивный заголовок с шириной области просмотра устройства. Вот ссылка на страницу, где я хочу добавить ответный текстовый заголовок. Ссылка на страницу

PS. Я хочу, чтобы "ИНДИЯ" в фоновом режиме реагировала.

Изображение страницы

Answer 1

Проверьте 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 для высоты.

Извините, если это не имеет особого смысла, сначала ответьте здесь. Проще проверить скрипку.

Answer 2

Вы можете использовать vw или vh в вашем css:

h3 {
  font-size: 5vw;
}

vw unit - равно 1% ширины исходного содержащего блока.

vh unit - равно 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

Вы можете использовать vw для размера шрифта в CSS.

VW означает "ширина области просмотра".

По сути, область просмотра - это размер окна браузера. Так что 1vw будет равен 1% ширины области просмотра.

Итак, вы изменили бы его размер шрифта в CSS так:

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