Как получить адаптивный размер шрифта на настольном веб-сайте с максимальной шириной? - PullRequest
Новая
       30

Как получить адаптивный размер шрифта на настольном веб-сайте с максимальной шириной?

0 голосов
/ 20 марта 2019

Я пытаюсь расположить фрагмент текста поверх изображения.Изображение будет с изображением товара, и я должен показать, как текст клиента будет выглядеть на этом товаре.

Трюки :

  • текст и фоновое изображениедолжен быть отзывчивым
  • настольные веб-сайты имеют максимальную ширину

Это то, что у меня есть пример проекта здесь , но я считаю, что некоторые математические вычисления должны бытьсделано на размер текста образца текста (с помощью функции css calc () )

Границы

(они не останутся и будут к лучшемупонимание позиций)

  • черные рамки находятся внутри изображения, и они показывают конец изображения и где текст должен соответствовать
  • красная рамка - контейнер изображенияи наложенный текст
  • зеленая рамка - это контейнер с наложенным текстом
  • зеленая рамка (снова) - это изображение 

body {
  background-color: grey;
  padding: 0;
  margin: 0 auto;
}
input {
  font-family: inherit;
  color: green;
}

@media (min-width: 1024px) {
  body {
max-width: 600px;
  }
}

#sample-container {
  position: relative;
  width: 100%;
  z-index: 1;
  border-style: solid;
  border-color: red;
  box-sizing: border-box;
}
#sample-image {
  position: relative;
  width: 100%;
  z-index: 1;
  border-style: solid;
  border-color: green;
  box-sizing: border-box;
}
#sample-text {
  z-index: 2;
  position: absolute;
  top: 36%;
  right: 58%;
  width: 25%;
  text-align: right;
  font-size: 5vw;
  color: blue;
  transform: rotate(-16deg);
  border-style: solid;
  border-color: green;
  box-sizing: border-box;
}
<div id="sample-container">
  <img id="sample-image" src="images/sample-image.png">
  <div id="sample-text">SAMPLE</div>
</div>

Проблема:

  • с размером шрифта относительно области просмотра заставляет пользовательский текст оставить свойобозначенная область, когда страница находится в режиме рабочего стола (широкая страница, более 1024 пикселей), поскольку область просмотра страницы становится шире, чем раздел «обозначенный / рисуемый» страницы
...