Почему размер текста не остается одинаковым при увеличении масштаба в моем браузере?

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

Пример:

p {
  width: 10%;
  height: 10%;
  background-color: rgb(0,0,0);
  top: 50%;
  left: 50%;
  position: fixed;
  color: rgb(255,255,255);
  font-size: 175%;
}
<!DOCType html>
<html>
  <head>
    <title>:(</title>
  </head>
  <body>
    <div><p>TEXT</p></div>
  </body>
</html>

Это всего лишь пример. Не совсем так, как я это делаю. При увеличении или уменьшении браузера размер элемента div будет примерно одинаковым, но текст, похоже, не останется в поле.

Источник

3 ответа

Решение

Предыдущий ответ: попробуйте использовать их вместо процентов.

Если вы хотите, чтобы он хорошо масштабировался, вам нужно иметь относительное измерение для вашего CSS. Эм и процент может помочь вам там.

Если вы хотите, чтобы размер текста оставался одинаковым, несмотря на то, что браузер увеличивал / уменьшал масштаб, вы можете добиться этого с помощью окна просмотра:

https://css-tricks.com/examples/ViewportTypography/

p {
  font-size: 2vmin;
}

Однако это не рекомендуется, и формат vh, vw и vmin имеет проблемы совместимости.

Источник

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

Источник

Одним из способов является использование свойства text-size-Adjust, но оно работает только в последних версиях Chrome и Edge с поддержкой префикса:

https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

Источник
Другие вопросы по тегам