Как реализовать :root { размер шрифта: calc(100vw/40); } для масштабирования размера(ов) шрифта

Согласно CSS Values ​​and Units Module Level 3, рекомендация W3C Candidate 8.1 Математические выражения: 'calc()':

Следующее устанавливает «размер шрифта» таким образом, чтобы ровно 40 em помещались в области просмотра, гарантируя, что примерно одинаковое количество текста всегда заполняет экран независимо от размера экрана.

:root {
  font-size: calc(100vw / 40);
}

Если остальная часть дизайна указана с использованием единицы «rem», весь макет будет масштабироваться в соответствии с шириной области просмотра.

Мне интересно, как это реализовать. Я предполагаю, что мне нужно будет использовать @media где-нибудь, чтобы определить размер экрана пользователя, затем установить: root, как показано, а затем использовать rem для всех размеров шрифта. Может ли кто-нибудь дать мне простой шаг за шагом и / или отзыв о том, действительно ли это работает? Спасибо.


css media-queries viewport-units
person Michael Moriarty    schedule 12.07.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам не нужно использовать @media для определения размера экрана пользователя. Прелесть vw/vh в том, что они автоматически подстраиваются под размер области просмотра. Просто используйте vw/vh/rem для всех измерений размера после добавления вышеуказанного правила в вашу таблицу стилей, и ваш макет будет масштабироваться, даже если пользователь изменит размер своего браузера.

Вот простой пример. Вы можете видеть, что все свойства width, height, margin-left и font-size используют исключительно единицы rems или viewport. Запустите фрагмент, покажите его в полноэкранном режиме и измените размер браузера, и вы увидите, как весь макет, включая столбец h1 и текст, масштабируется с шириной окна браузера (на что указывает использование vw в строке :root правило CSS).

:root {
  font-size: calc(100vw / 40);
}

body, h1, h2 { margin: 0; }

h1 {
  position: fixed;
  width: 15rem;
  height: 100vh;
  font-size: 4rem;
  background-color: #ccc;
}

h2, p { margin-left: 15rem; }

h2 {
  font-size: 2.4rem;
  background-color: #ff0;
}

p {
  font-size: 1.2rem;
}
<h1>Title</h1>
<h2>Subtitle</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ea sed adversarium
   definitionem, legere malorum laboramus ne cum. Dictas corrumpit vix at, sea
   platonem senserit sapientem ne. At vel laudem audire bonorum. Perfecto posidonium
   eu has, ullum mollis inimicus eos te, sit eu novum atomorum.
<p>Alii libris evertitur in vix, congue ocurreret ut usu, nostro dolores vulputate
   pri ex. Eu eam sint moderatius, eu eos wisi corpora, est sanctus corpora ad. Cu
   nam utamur saperet. Qui id purto quaerendum, ex usu iudico alterum voluptatibus.
<p>Illum mucius praesent id eam, oratio habemus eum ei. Saepe docendi at est, eu mea
   perfecto voluptaria, has admodum recusabo contentiones te. Putant definitionem sea
   ea, viris tantas ad cum. Wisi melius ius ut, est te unum aliquando. Ea quo
   ancillae philosophia.

person BoltClock    schedule 12.07.2015
comment
Это удивительно! Большое спасибо! - person Michael Moriarty; 12.07.2015