it-swarm.com.ru

Адаптивный размер шрифта в 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 Типография пример страницы , заголовки адаптируются к браузеру, так как он сжимается и расширен.

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

310
user2213682

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;
}

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

266
Peter Featherstone

Вы можете использовать значение области просмотра вместо 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: http://css-tricks.com/viewport-sized-typography/

605
SolidSnake

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

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}
35
Albert Xing

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

Если вы можете написать свое приложение для IE9 + и всех других современных браузеров, которые поддерживают CSS calc (), rem и vmin, вы можете использовать это для получения масштабируемого текста без Media Queries:

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

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

33
csuwldcat

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

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

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

29
Javi Stolz

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

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

body
{
       font-size: 22px; 
}
h1
{
       font-size:44px;
}

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

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

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

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

CSS3 поддерживает новые измерения, относящиеся к порту просмотра. Но это не работает в 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-tricks.com/.... , а также смотрите caniuse.com/....

14
aWebDeveloper

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

font-size: calc(16px + 0.4vw);
9
Tautvydas Bagdžius

Есть другой подход к адаптивным размерам шрифтов - использование блоков 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; }

}

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

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

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

Поддержка блоков Rem - http://caniuse.com/#feat=rem

9
Yuri P.

Это частично реализовано в фундаменте 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, чтобы установить размеры шрифта для соответствующих размеров экрана

8
Sudheer

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

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

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

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

6
phlegx

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

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

* {
  /* 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);
}
5
Dannie Vinther

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

3
Raghav Kukreti

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

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

Ниже я дам вам четыре нахальных миксина. Вам придется настроить их параметры под свои нужды.

=font-h1p-style-generator-manual() // you dont need use this one those are only styles to make it pretty
=media-query-base-font-size-change-generator-manual() // this mixin sets base body size that will be used by h1-h6 tags to recalculate their size in 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 place holder 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; 

}
2
DevWL

Как и во многих фреймворках, как только вы "выйдете из сетки" и переопределите 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>
2
thdoan

Найти это решение, работа очень хорошо для меня.

/* 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)));
}
1
Buzz

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

  1. Используйте rem, например, для 2,3 бэр
  2. Используйте их, например, для 2.3em
  3. Используйте%, например, 2,3% Кроме того, вы можете использовать: VH, VW, Vmax и Vmin.

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

1
Priyanshu Tiwari

Один из способов решить проблему с тем, чтобы текст хорошо выглядел как на настольном компьютере, так и на мобильном устройстве/планшете, состоит в фиксировании размера текста в физических единицах, таких как физические сантиметры или дюймы, которые не зависят от экрана 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 его экрана. Шрифт в физических единицах всегда не слишком большой и не слишком маленький, при условии, что расстояние до экрана обычное (расстояние чтения книги).

1
Serge Rogatch
 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
King Rayhan

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

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

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

/* Define variable based on the orientation. */
/* 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 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>

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

Как вы находите эту идею?

1
Christian Groothoff

Размер текста может быть установлен с помощью единицы 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;
    }
  }
1
user10154568

Вы можете сделать размер шрифта отзывчивым, если определите его в vw (ширина области просмотра). Однако не все браузеры поддерживают это. Решением является использование JS для изменения базового размера шрифта в зависимости от ширины браузера и установки всех размеров шрифта в%. Вот статья, описывающая, как сделать адаптивные размеры шрифтов: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

1
Dmitry Pochtennykh

я использую эти 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);
}
1
Buzz

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

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

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

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

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

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

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

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

0
Shuwei

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

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

 h2{
        font-size: 4.3vw;
    }

}
0
Harsh Gupta