Изменение размера шрифта при ресайзе

117

05 февраля 2022, 16:10

Есть вот такой макет

Надпись " Planeta " расположина на всю ширину сайта. Как сделать так чтобы при ресайзе она пропорционально уменьшалась и всегда влазила по ширине? Пытался сделать через и svg text. Пока не получилось. Возможно ли это сделать без JavaScript?

Answer 1

если в html head - е дабавить

<meta name="viewport" content="width=device-width, initial-scale=1.0">

то можно попробовать с vw(viewport width) и vh(viewport height)

.class {
  font-size: 5vw;
}

Answer 2

vw - единица ширины экрана
vh - единица высота экрана

@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Open+Sans:400,600,700|Raleway:400,900&display=swap'); 
 
*, *:before, *:after { 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
} 
 
body { 
  margin: 0; 
  font-size: 16px; 
  font-family: 'Open Sans', sans-serif; 
  color: white; 
} 
 
div { 
  height: 100vh; 
  background-color: #bab6b6; 
  font-size: 25vw; 
  display: -webkit-flex; 
  display: -moz-flex; 
  display: -ms-flex; 
  display: -o-flex; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}