Адаптивный размер шрифта css: Как сделать адаптивный текст css

html — Как масштабировать шрифты в адаптивной верстке?

Сейчас у меня установлено для html font-size: 16px, h2 - 22px. Как правильно прописывать их под разные размеры экрана?

Брать и вручную подгонять, нормально читается или нет? Может есть какие-то правила, например, что для размера "768 - 992px" будет нормально читаться и выглядеть шрифт 13px. Если я установлю ед. из. шрифтов в rem, то для моб. устройств от какого размера шрифта будут просчитываться значение в rem?

• html
• css

Берем гибкую основу:

body {
    font-size:100%; /*  по-умолчанию 16px */
}
p {
    font-size: 1.25rem; /* 1,25rem относительно основы в 16px к body в результате даст размер шрифта в 16*1.25 = 20px */
}

Чтобы изменить шрифт для более маленьких экранов с помощью медиазапросов, достаточно просто изменить размер шрифта body, а так как текст страницы масштабируется пропорционально ему:

@media screen and (max-width: 800px) {
    body {
        font-size:90%;
    }
}
@media screen and (max-width: 1000px) {
    body {
        font-size:80%;
    }
}

REM — относительный размер шрифта рассчитывается от корня страницы (Root EM), а именно — от тега HTML, а не от родителя. Меняя размер шрифта у HTML — все дочерние блоки так же меняют свой размер шрифта.

Есть еще вариант с размерами относительно вьюпорта — vw, vh.

Вариант применения svg текста.

В сети достаточно информации по данному вопросу, стоит только поискать!

Здравствуйте. На мой взгляд самым верным решением будет указание размеров шрифтов для каждого разрешения экрана.

@media only screen and (min-width: 600px) {
font-size:12px;
}
@media only screen and (min-width: 768px) {
font-size:13px;
}

Это позволит в случае необходимости быстро изменить размер шрифта. Также это гарантирует отображение размера шрифта согласно дизайну сайта.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как создать отзывчивый текст

schoolsw3. com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

---

❮ НазадВперед ❯

---

Узнать, как создать адаптивную типографику с помощью CSS.

---

Отзывчивый текст

Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.

Редактор кода »

---

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

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

Таким образом, размер текста будет соответствовать размеру окна браузера:

Пример

<h2>Привет мир</h2>
<p>Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.</p>

Редактор кода »

Видовой экран — это размер окна браузера. 1vw = 1% от ширины видового экрана. Если видовой экран имеет ширину 50cm, то 1vw составляет 0,5cm.

---

Изменение размера шрифта с помощью медиа запросов

Вы также можете использовать медиа запросы для изменения размера шрифта элемента на определенных размерах экрана:

Пример

/* Если размер экрана 601px широкий или больше, установите размер шрифта <div> равным 80px */
@media screen and (min-width: 601px) {
  div. example {
    font-size: 80px;
  }
}

/* Если размер экрана составляет 600 пикселей в ширину или меньше, установите размер шрифта <div> равным 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Редактор кода »

Совет: Зайдите на наш учебник CSS Шрифт, чтобы узнать больше о шрифтах.

Чтобы узнать больше о медиа запросах, читайте наш учебник CSS Медиа запросы.

❮ НазадВперед ❯

ВЫБОР ЦВЕТА

---

---

---

ТОП Учебники

HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник

ТОП Справочники

HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник

ТОП Примеры

HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3. CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

---

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

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

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

Мне нравится, потому что он намного компактнее. И быстрее печатать. В остальном он обеспечивает ту же функциональность. В любом случае, если вы все еще хотите придерживаться нового синтаксиса — scss, то не стесняйтесь конвертировать мой контент Sass в scss здесь: [ПРЕОБРАЗОВАТЬ SASS В SCSS ЗДЕСЬ]

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

 =font-h2p-style-generator-manual() // Вам не нужно использовать этот. Это только стили, чтобы сделать его красивым.
=media-query-base-font-size-change-generator-manual() // Этот миксин устанавливает базовый размер тела, который будет использоваться тегами h2-h6 для пересчета их размера в медиа-запросе.
=h2p-font-size-generator-auto($h2-fs: 3em, $h2-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Здесь вы устанавливаете размер h2 и переходы между тегами h
=config-and-run-font-generator() // Этот вызывает только другие
 

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

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

КОПИРУЙТЕ И ВСТАВЬТЕ ЭТИ МИКСИНЫ В ВАШ ФАЙЛ:

 =font-h2p-style-generator-manual()
  тело
    семейство шрифтов: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, без засечек // шрифты Google
    размер шрифта: 100%
    высота строки: 1.3em
  % заголовков
    высота строки: 1em
    вес шрифта: 700
  п
    высота строки: 1.3em
    вес шрифта: 300
  @для $i от 1 до 6
    ч # {$ я}
      @продлить %заголовки
=media-query-base-font-size-change-generator-manual()
  тело
    размер шрифта: 1.2em
  Экран @media и (минимальная ширина: 680 пикселей)
    тело
      размер шрифта: 1.
 
  4em
  Экран @media и (минимальная ширина: 1224px)
    тело
      размер шрифта: 1.6em
  Экран @media и (минимальная ширина: 1400 пикселей)
    тело
      размер шрифта: 1.8em
=h2p-font-size-generator-auto($h2-fs: 3em, $h2-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h2-fs: $h2-fs // Установить первый элемент заголовка на этот размер
  $h2-step-down: $h2-step-down // Уменьшение каждый раз на 0,3
  $p-same-as-hx: $p-same-as-hx // Установить размер шрифта p такой же, как у h(6)
  $h2-fs: $h2-fs + $h2-step-down // Коррекция зацикливания
  @для $i от 1 до 6
    ч # {$ я}
      размер шрифта: $h2-fs - ($h2-шаг вниз * $i)
    @if $i == $p-такой же-как-hx
      п
        размер шрифта: $h2-fs - ($h2-шаг вниз * $i)
// ЗАПУСКАТЬ ТОЛЬКО ЭТОТ МИКСИН. ЭТО ЗАПУСТИТ ОСТАЛЬНОЕ
=config-and-run-font-generator()
  +font-h2p-style-generator-manual() // Просто заполнитель для нашего стиля шрифта
  +media-query-base-font-size-change-generator-manual() // Просто заполнитель для размера шрифта нашего медиа-запроса
  +h2p-font-size-generator-auto($h2-fs: 2em, $h2-step-down: 0.
  2, $p-same-as-hx: 5) // Здесь задаем все параметры
 

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

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

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

СОЗДАН CSS:

 тело {
  семейство шрифтов: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, без засечек;
  размер шрифта: 100%;
  высота строки: 1,3 em;
  перенос слов: прерывание слова; }
h2, h3, h4, h5, h5, h6 {
  высота строки: 1em;
  вес шрифта: 700; }
п {
  высота строки: 1,3 em;
  вес шрифта: 300; }
тело {
  размер шрифта: 1.2em; }
Экран @media и (минимальная ширина: 680 пикселей) {
  тело {
    размер шрифта: 1.4em; } }
Экран @media и (минимальная ширина: 1224px) {
  тело {
    размер шрифта: 1. 6em; } }
Экран @media и (минимальная ширина: 1400 пикселей) {
  тело {
    размер шрифта: 1.8em; } }
ч2 {
  размер шрифта: 2em; }
h3 {
  размер шрифта: 1.8em; }
h4 {
  размер шрифта: 1.6em; }
h5 {
  размер шрифта: 1.4em; }
h5 {
  размер шрифта: 1.2em; }
п {
  размер шрифта: 1.2em; }
h6 {
  размер шрифта: 1em;
}
 

html — я хотел бы добиться размера шрифта, ориентированного на адаптивный дизайн CSS. Вы должны установить размер шрифта явно для селектора

body , а затем во всех других элементах использовать относительные единицы, либо rem , либо em . rem намного проще в работе. Затем вы должны установить медиа-запросы для разных размеров экрана, и когда эти медиа-запросы запускаются, CSS изменит размер шрифта в кузов селектор. Поскольку для всех остальных элементов установлены относительные размеры шрифта, при увеличении или уменьшении размера шрифта body все остальные размеры шрифта будут увеличиваться или уменьшаться пропорционально. Медиа-запросы могут выглядеть следующим образом:

 @media screen и (max-width: 1200px) {
  тело {
    размер шрифта: 0.875rem;
  }
}
 

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

html , я использую em единиц для шрифтов в body и всех элементах абзаца и заголовка. Я оборачиваю все в другой элемент и применяю vw единиц к этой оболочке, чтобы получить отзывчивую типографику размером с область просмотра.

 HTML {
  шрифт: 62,5% без засечек;
}
тело {
  фон: #f2f2f2;
  шрифт: 1.6em/1.4 Roboto, без засечек;
  цвет: #333;
  маржа: 0;
  заполнение: 0;
}
.wrapper-шрифт-стрейч {
  размер шрифта: 0,85vw;
}
ч2 {
  шрифт: 5em Lato, без засечек;
  поле: 0.3em 0;
  выравнивание текста: по центру;
}
h3 {
  шрифт: капитель 4em Lato, без засечек;
  поле: 0.5em 0;
  выравнивание текста: по центру;
}
.лорем {
  размер шрифта: 2.25em;
  поле: 0 авто 2em;
  максимальная ширина: 60ч;
  выравнивание текста: по ширине;
}
. lorem: первая строка {
  размер шрифта: 1.3em;
  высота строки: 1;
}
.lorem: первая буква {
  семейство шрифтов: "Dancing Script", без засечек;
  размер шрифта: 2,9Эм;
  вес шрифта: 700;
} 

 <дел>
Это заголовок
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum incidunt ducimus voluptas perspiciatis doloremque molestiae voluptate omnis, sequi dolor velit! Recusandae sunt iste tenetur ut nam aperiam? Minima repellat, mollitia ea odio veniam iusto
 fugiat dicta deleniti neque fugit beatae voluptates quo perferendis eaque necessitatibus nihil. Molestias vel voluptatum eum rem quia! Numquam odio ad deserunt mollitia, est ipsum illo ex repellendus molestiae, aspernatur vitae porro saepe nulla, 
 voluptatum cum exercitationem quisquam? Pariatur accusamus et ratione, obcaecati nisi facilis vero maxime, minus, in sequi expedita ut illum. Cupiditate nesciunt, sint debitis et voluptates quae fugit ex illum. Suscipit, quas, delectus dolorem iure
 maxime dicta quis quidem, exercitationem consequuntur vero doloremque veritatis nihil ametinventure animi eligendi fugiat libero obcaecati facere est ad modi dignissimos alias aperiam.