Адаптивный размер шрифта в CSS

Я создал сайт, используя сетку Zurb Foundation 3 . Каждая страница имеет большое h1:

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}

<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

Когда я изменяю размер браузера до размера мобильного устройства, крупный шрифт не корректируется и заставляет браузер включать горизонтальную прокрутку для размещения большого текста.

Я заметил, что на странице примера типографии Zurb Foundation 3 заголовки адаптируются к браузеру по мере его сжатия и расширения.

Я что-то упускаю действительно очевидное? Как мне этого добиться?

Не font-sizeбудет реагировать так при изменении размера окна браузера. Вместо этого они реагируют на настройки масштабирования / размера шрифта браузера, например, если вы нажмете Ctrlи +вместе на клавиатуре в браузере.

Медиа-запросы

Вы должны будете рассмотреть использование медиа-запросов, чтобы уменьшить размер шрифта через определенные промежутки времени, когда он начинает ломать ваш дизайн и создавать полосы прокрутки.

Например, попробуйте добавить это в свой CSS внизу, изменив ширину 320 пикселей, где бы ваш дизайн не ломался:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

Длина просмотра в процентах

Вы можете также использовать окно просмотра процентных длины , такие как vw, vh, vminи vmax. Официальный документ W3C для этого гласит:

Длина области просмотра в процентах относится к размеру исходного содержащего блока. Когда высота или ширина исходного содержащего блока изменяется, они масштабируются соответственно.

Опять же, из того же документа W3C каждая отдельная единица может быть определена, как показано ниже:

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

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

vmin unit - равно меньшему из vw или vh.

Единица vmax - равно наибольшему из vw или vh.

И они используются точно так же, как и любое другое значение CSS:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

Совместимость относительно хорошая, как можно увидеть здесь . Однако некоторые версии Internet Explorer и Edge не поддерживают vmax. Кроме того, у iOS 6 и 7 есть проблема с модулем vh, которая была исправлена ​​в iOS 8.

Вы можете использовать значение области просмотра вместо ems, pxs или pts:

1vw = 1% ширины области просмотра

1vh = 1% высоты области просмотра

1vmin = 1vw или 1vh, в зависимости от того, что меньше

1vmax = 1vw или 1vh, в зависимости от того, что больше

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

Из CSS-хитрости: типоразмер видового экрана

Я обдумывал способы преодоления этой проблемы и считаю, что нашел решение:

Если вы можете написать свое приложение для Internet Explorer 9 (и более поздних версий) и всех других современных браузеров, которые поддерживают CSS calc (), rem и vmin. Вы можете использовать это для достижения масштабируемого текста без медиазапросов:

body {
  font-size: calc(0.75em + 1vmin);
}

Вот оно в действии: http://codepen.io/csuwldcat/pen/qOqVNO

Используйте mediaспецификаторы CSS (это то, что они [zurb] используют) для адаптивного стиля:

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Если вы не против использовать решение jQuery, вы можете попробовать плагин TextFill

jQuery TextFill изменяет размер текста, чтобы поместиться в контейнер, и делает размер шрифта как можно большим.

https://github.com/jquery-textfill/jquery-textfill

Есть несколько способов добиться этого.

Используйте медиа-запрос , но он требует размеров шрифта для нескольких точек останова:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

@media (min-width: 768)
{
    body
    {
        font-size: 17px;
    }
    h1
    {
        font-size: 24px;
    }
}

Используйте размеры в % или em . Просто измените базовый размер шрифта, и все изменится. В отличие от предыдущего, вы можете просто менять основной шрифт, а не h1 каждый раз, или позволить базовому размеру шрифта быть по умолчанию для устройства, а все остальное em:

1. «Ems» (em) : «em» является масштабируемой единицей. Em равен текущему размеру шрифта, например, если размер шрифта документа составляет 12 пунктов, 1 em равен 12 пунктам. Ems являются масштабируемыми по своей природе, поэтому 2 em будет равно 24 pt, .5 em будет равно 6 pt и т. Д.
2. Процент (%) : процентная единица очень похожа на единицу «em», за исключением нескольких фундаментальных различий. Прежде всего, текущий размер шрифта равен 100% (т.е. 12 pt = 100%). При использовании процентной единицы ваш текст остается полностью масштабируемым для мобильных устройств и для доступности.

Смотрите kyleschaeffer.com / ....

CSS 3 поддерживает новые измерения, относящиеся к порту просмотра. Но это не работает на Android:

1. 3.2vw = 3.2% ширины области просмотра
2. 3.2vh = 3.2% от высоты области просмотра
3. 3.2vmin = меньше 3.2vw или 3.2vh

4. 3.2vmax = больше 3.2vw или 3.2vh

   body
   {
       font-size: 3.2vw;
   }

Смотрите CSS-хитрости ..., а также посмотрите, можно ли использовать ...

Есть другой подход к адаптивным размерам шрифтов - использование блоков rem.

html {
    /* Base font size */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

Далее в медиа-запросах вы можете настроить все размеры шрифтов, изменив базовый размер шрифта:

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

Чтобы это работало в Internet Explorer 7 и Internet Explorer 8, вам нужно добавить запасной вариант с px-единицами:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

Если вы разрабатываете с Less , вы можете создать миксин, который будет делать математику для вас.

Поддержка подразделений Rem - http://caniuse.com/#feat=rem

Решение "vw" имеет проблему при переходе на очень маленькие экраны. Вы можете установить базовый размер и подняться оттуда с помощью calc ():

font-size: calc(16px + 0.4vw);

Это частично реализовано в фундаменте 5.

В файле _type.scss у них есть два набора переменных заголовка:

// We use these to control header font sizes
// for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

Для среднего уровня они генерируют размеры на основе первого набора переменных:

@media #{$medium-up} {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-font-size; }
    h2 { font-size: $h2-font-size; }
    h3 { font-size: $h3-font-size; }
    h4 { font-size: $h4-font-size; }
    h5 { font-size: $h5-font-size; }
    h6 { font-size: $h6-font-size; }
}

А для стандартных экранов, то есть для небольших экранов, они используют второй набор переменных для генерации CSS:

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

Вы можете использовать эти переменные и переопределить в своем собственном файле scss, чтобы установить размеры шрифта для соответствующих размеров экрана.

Адаптивный размер шрифта также можно сделать с помощью этого кода JavaScript, который называется FlowType :

• http://simplefocus.com/flowtype/
• https://github.com/simplefocus/FlowType.JS

FlowType - Отзывчивая веб-типография во всей красе: размер шрифта зависит от ширины элемента.

Или этот код JavaScript называется FitText :

• http://fittextjs.com/
• https://github.com/davatron5000/FitText.js

FitText - делает размеры шрифта гибкими. Используйте этот плагин для адаптивного дизайна для изменения размера заголовков на основе соотношения.

Если вы используете инструмент для сборки, попробуйте Rucksack.

В противном случае вы можете использовать CSS-переменные (пользовательские свойства) для простого управления минимальным и максимальным размерами шрифта, например так ( демо ):

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

Я видел отличную статью от CSS-Tricks . Работает просто отлично:

body {
    font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
    [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Например:

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Мы можем применить то же уравнение к line-heightсвойству, чтобы изменить его и в браузере.

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

Я только что выдвинул идею, что вам нужно определить размер шрифта только один раз для каждого элемента, но это все еще зависит от медиа-запросов.

Во-первых, я установил переменную «--text-scale-unit» в «1vh» или «1vw», в зависимости от области просмотра с использованием медиа-запросов.

Затем я использую переменную используя calc () и мой номер мультипликатора для размера шрифта:

/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root {
    --text-scale-unit: 1vw;
  }
}


/* Use a variable with calc and multiplication. */
.large {
  font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
  font-size: calc(var(--text-scale-unit) * 10);
}
.small {
  font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
  font-size: calc(var(--text-scale-unit) * 2);
}

<span class="middle">
  Responsive
</span>
<span class="large">
  text
</span>
<span class="small">
  with one
</span>
<span class="extra-small">
  font-size tag.
</span>

В моем примере я использовал только ориентацию области просмотра, но принцип должен быть возможен с любыми медиа-запросами.

«FitText» в jQuery, вероятно, является лучшим решением для адаптивных заголовков. Проверьте это на GitHub: https://github.com/davatron5000/FitText.js

Как и во многих фреймворках, как только вы «выйдете из сетки» и переопределите CSS по умолчанию для фреймворка, все начнет ломаться влево и вправо. Каркасы по своей природе жесткие. Если вы будете использовать стиль H1 по умолчанию в Zurb вместе с их классами сетки по умолчанию, то веб-страница должна отображаться на мобильном телефоне должным образом (то есть реагировать).

Тем не менее, кажется, что вы хотите очень большие заголовки 6.2em, что означает, что текст должен будет сжиматься, чтобы поместиться внутри мобильного дисплея в портретном режиме. Лучше всего использовать адаптивный текстовый плагин jQuery, такой как FlowType и FitText . Если вы хотите что-то более легкое, то вы можете проверить мой плагин Scalable Text jQuery:

http://thdoan.github.io/scalable-text/

Пример использования:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

В реальном оригинальном Sass (не scss) вы можете использовать следующие миксины, чтобы автоматически устанавливать абзацы и все заголовки font-size.

Мне нравится это, потому что это намного более компактно. И быстрее набрать. Помимо этого, он обеспечивает ту же функциональность. В любом случае, если вы все еще хотите придерживаться нового синтаксиса - scss, тогда смело конвертируйте мой контент Sass в scss здесь: [CONVERT SASS TO SCSS HERE]

Ниже я даю вам четыре миксина Sass. Вам придется настроить их параметры в соответствии с вашими потребностями.

=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones

После того, как вы закончите играть с настройками, просто сделайте вызов на один миксин - это: + config-and-run-font-generator () . Смотрите код ниже и комментарии для получения дополнительной информации.

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

Скопируйте и вставьте эти смеси в ваш файл:

=font-h1p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1.6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h1-fs: $h1-fs // Set first header element to this size
  $h1-step-down: $h1-step-down // Decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
  $h1-fs: $h1-fs + $h1-step-down // Looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h1-fs - ($h1-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-style-generator-manual() // Just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here

НАСТРОЙТЕ ВСЕ МИКСИНЫ ДЛЯ ВАШИХ ПОТРЕБНОСТЕЙ - ИГРАЙТЕ С НИМ! :) И ТОГДА ПОЗВОНИТЕ ЭТО В ТОПЕ ВАШЕГО АКТУАЛЬНОГО SASS КОДА С:

+config-and-run-font-generator()

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

Сгенерированный CSS:

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  word-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em;

}

Я использую эти классы CSS, и они делают мой текст плавным при любом размере экрана:

.h1-fluid {
    font-size: calc(1rem + 3vw);
    line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
    font-size: calc(1rem + 2vw);
    line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
    font-size: calc(1rem + 1vw);
    line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
    font-size: calc(1rem + 0.5vw);
    line-height: calc(1.4rem + 0.6vw);
}

 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }

Есть следующие способы, которыми вы можете достичь этого:

1. Используйте rem, например, 2.3 rem
2. Используйте их, например, 2.3em
3. Используйте%, например, на 2,3%. Кроме того, вы можете использовать: vh, vw, vmax и vmin.

Эти единицы будут автоматически изменять размер в зависимости от ширины и высоты экрана.

Вы можете сделать размер шрифта отзывчивым, если определите его в vw (ширина области просмотра). Однако не все браузеры поддерживают это. Решением является использование JavaScript для изменения базового размера шрифта в зависимости от ширины браузера и установки всех размеров шрифта в%.

Вот статья, описывающая, как сделать адаптивные размеры шрифтов: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

Я нашел это решение, и оно работает очень хорошо для меня:

/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Один из способов решения проблемы с тем, чтобы текст выглядел хорошо как на настольном компьютере, так и на мобильном устройстве / планшете, заключается в фиксировании размера текста в физических единицах, таких как физические сантиметры или дюймы, которые не зависят от PPI ​​экрана (точек на дюйм).

На основе этого ответа ниже приведен код, который я использую в конце HTML-документа для адаптивного размера шрифта:

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
  // etc for your different classes
</script>

В приведенном выше коде элементам другого класса назначаются размеры шрифта в физических единицах, если браузер / операционная система правильно настроена для PPI своего экрана.

Шрифт в физических единицах всегда не слишком большой и не слишком маленький, при условии, что расстояние до экрана обычное (расстояние чтения книги).

Размер текста можно задать с помощью vwединицы измерения, что означает «ширина области просмотра». Таким образом, размер текста будет соответствовать размеру окна браузера:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

Для моего личного проекта я использовал vw и @meida. Работает отлично.

.mText {
    font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
}


.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
}

Используйте это уравнение:

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

Для чего-либо большего или меньшего, чем 1440 и 768, вы можете либо присвоить ему статическое значение, либо применить тот же подход.

Недостаток решения vw заключается в том, что вы не можете установить масштабное соотношение, скажем, 5vw при разрешении экрана 1440 может в конечном итоге иметь размер шрифта 60 пикселей, ваш размер шрифта, но при уменьшении ширины окна до 768 он может закончиться будучи 12px, а не минимальный вы хотите.

При таком подходе вы можете установить верхнюю и нижнюю границу, а шрифт будет масштабироваться между ними.

Мы можем использовать calc () из CSS

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

Математическая формула является calc (minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth)))

Codepen

Боюсь, что не существует простого решения в отношении изменения размера шрифта. Вы можете изменить размер шрифта с помощью медиа-запроса, но технически он не будет плавно изменяться. Например, если вы используете:

@media only screen and (max-width: 320px){font-size: 3em;}

ваш font-size будет 3em для 300 пикселей и 200 пикселей шириной. Но вам нужно меньше font-sizeна ширину 200 пикселей, чтобы сделать идеально отзывчивым.

Итак, каково реальное решение? Есть только один способ. Вы должны создать изображение PNG (с прозрачным фоном), содержащее ваш текст. После этого вы можете легко сделать ваше изображение отзывчивым (например: ширина: 35%; высота: 28 пикселей). Таким образом, ваш текст будет полностью реагировать на все устройства.

После многих выводов я получил такую ​​комбинацию:

@media only screen and (max-width: 730px) {

    h2 {
        font-size: 4.3vw;
    }
}

попробуй это

html { font-size: min(max(16px, 4vw), 22px); }

получил его с https://css-tricks.com/simplified-fluid-typography/

Вот то, что сработало для меня. Я только проверял это на iPhone.

Если у вас есть h1, h2или pтеги, поместите это в текст:

<h1><font size="5">The Text you want to make responsive</font></h1>

Это отображает текст на 22pt на рабочем столе, и это все еще доступно для чтения на iPhone.

<font size="5"></font>