|
Сделать адаптивный текст и размер шрифта CSS
|
|
| Kosten | Среда, 25 Июля 2018, 23:59 | Сообщение 1 |
| Если разговор заходит об адаптивности, то безусловно многие думают про дизайн сайта, но также необходимо и даже важно понимать, про адаптивный шрифт, который на современном сайте больщен быть в обязательном порядке. Создание размера шрифта в зависимости от размера видового экрана или контейнера должно быть обязательным для завершения ваших адаптивных проектов.
Наличие фиксированного размера по сравнению с устройствами не всегда является хорошей идеей. Ключевым моментом является получение читаемого размера шрифта и удобной длины строки в большинстве видовых экранов. Элементы просмотра CSS и медиа запросы предоставляют средства для реализации гибкого размера шрифта.
Размер шрифта и длина строки
Существует множество разных представлений, на которых находится лучший размер шрифта пикселя, или является минимальным читаемым размером. Конечно, верно то, что большие шрифты более доступны и удобны для чтения. Тенденция последних лет заключалась в увеличении размеров шрифтов. Большинство сайтов сегодня используют размер шрифта от 14 до 18 пикселей для основного текста. Эксперты по изобилии рекомендуют размер шрифта не менее 16 пикселей.
Размер шрифта намного больше, чем кажется. Обратите внимание, что количество слов на строку также является ключевым. Мы все испытали стресс при чтении узких столбцов текста двумя словами на строку. Длинные линии, как правило, трудно сосредоточиться, потому что мы используем начало и конец строк в качестве ссылок неосознанно. Однако исследование 2005 года показало, что мы стремимся читать быстрее текст с длинными строками длиной до 95 символов.
Единицы просмотра CSS
Единицы просмотра CSS: vw, vh, vmin и vmax были созданы специально для того, чтобы длина в CSS, включая размер шрифта, была относительно размера видового экрана. Они позволяют получить действительно отзывчивый размер шрифта с его размером в процентах от ширины или высоты видового экрана.
1. vw обозначает ширину окна просмотра. 1vw равно 1% ширины окна просмотра.
2. vh обозначает высоту видового экрана. 1vh равно 1% от высоты.
3. vmin относится к кратчайшему (ширина или высота), а vmax - самому длинному.
Пиксели, ems, rems и медиа-запросы
Второй способ реализовать отзывчивый размер шрифта - использовать медиа-запросы вместе с текстом фиксированного размера, используя значения ems, rems и px:
1. px определяет высоту букв в пикселях CSS
2. em относительно размера шрифта родителя, например. 2em = 28px, если размер шрифта родительского элемента равен 14px.
3. rem (root em) относительно размера шрифта элемента html. 1 rem измеряет то же самое во всем документе. ems трудно поддерживать в правилах, вложенных слишком глубоко, но у rems нет проблем.
Что делать дальше?
Размеры шрифтов и задаете их не в пикселях, а в em. Расчет такой: 1em = 16px и 1em = 100%
Расчет такой: 1em = 16px и 1em = 100%.
Например: берем заголловок, где нужн задать размер шрифта 30 пикселей. Здесь поможет колькулятор, что делим 30 на 16. Получается 1,875.
Остается поставить в CSS:
Код selector{
font-size: 1,875em;
}
Если нужно задать размер текста 9 пикселей:
9/16 = 0,5625 em.
Задавая размеры шрифтов, а точнее в таком стиле, то можете не бояться, если шрифт начнет свое изменение в настройках браузера.
Как на самом деле сделать размер шрифта отзывчивым, и здесь появляются медиа-запросы. Если вы используете ems, просто измените размер шрифта html по мере необходимости и тщательно настройте детали.
Например:
Ответственные размеры шрифта с медиа-запросами
CSS
Код html {
font-size: 19px;
}
.unbehaved-element {
font-size: 2em;
}
@media(max-width: 1560px) {
html {
font-size: 18px;
}
.unbehaved-element {
font-size: 1.9em; /*Точная настройка элементов */
}
}
@media(max-width: 980px) {
html {
font-size: 16px;
}
}
Никогда не подходите ниже 14px для текстового текста и старайтесь получать линии достаточно долго, не переусердствуй на больших экранах. Подсчитайте количество слов на строку, где попытайтесь сохранить ее ниже 20 во всех видовых экранах.
| | Страна: (RU) |
| |
| Kosten | Четверг, 26 Июля 2018, 00:11 | Сообщение 2 |
|
| Разумеется, для гибкого веб дизайна требуется гибкая типография. Размер шрифта, это интервал и макет, которые должны работать вместе, чтобы создать элегантный и понятный текстовый параметр в каждом окне просмотра.
Исследования показали, что более длинные строки, до 95 символов, читаются быстрее на экране, но неясно, означает ли это, что читателям нравится читать больше или лучше понимать. Слишком много переменных, чтобы сделать твердые выводы, поэтому имеет смысл ошибаться на стороне умеренности.
Если вы разрабатываете мобильные устройства в первую очередь, вы будете стремиться к краткости, чтобы избежать слишком маленького текста. На рабочем столе вы можете позволить линиям увеличить длину в больших окнах. Объявление max-width может избежать этого из-под контроля, но не обязательно, если вы постепенно увеличиваете заполнение.
Вы также можете сбалансировать размер шрифта от меры, чтобы контролировать количество символов в строке.
Вот пример из медиа-запросов CSS:
Код @media screen and (min-width:1200px) {
body { font-size:110%; } /* Увеличить размер шрифта */
}
@media screen and (min-width:1400px) {
html { padding:0 15%; } /* Уменьшить ширину контейнера */
}
@media screen and (min-width:1600px) {
body { font-size:125%; } /* Увеличить размер шрифтаe */
}
@media screen and (min-width:1800px) {
html { padding:0 20%; } /* Уменьшить ширину контейнера */
} | | Страна: (RU) |
| |
| Kosten | Четверг, 26 Июля 2018, 00:24 | Сообщение 3 |
|
| С помощью vw и vh вы можете иметь размер шрифта, который будет соответствовать ширине экрана.
Как управлять ими?
Вам не нужны медийные запросы для разных размеров шрифта. Вам не нужно много font-size деклараций вообще.
В основном, вам просто нужно:
Код html { font-size: calc(1em + 1vw) }
Размеры шрифта, которые соответствуют ширине устройства и отлично смотрятся на всех экранах.
Мы говорим браузеру , чтобы вычислить результат добавления 1em к 1vw. Давайте сначала поймем, что это значит.
Вы можете думать о em ценностях как размер текст упрется, если область просмотра 0px широкая, то vwесть 0, но значение по- font-size прежнему будет по меньшей мере em значением.
Если вы установите это значение html, вам вряд ли придется переопределить его в другом месте. Стили Браузер по умолчанию для всех заголовков, h1 через h6, все довольно хорошо. Вот некоторые значения по умолчанию:
Код h1 { font-size: 2em }
h2 { font-size: 1.5em }
Это 2em означает, что он будет в два раза больше базового размера шрифта, который является нашим отзывчивым размером шрифта, на html который мы устанавливаем, что идеально на 1.5 em означает, что он будет в 1,5 раза больше базового размера шрифта.
Там, где он становится глупым, есть такие вещи, как button и input. По какой-то причине они font-size по умолчанию не наследуют своих родителей. Вместо этого они по умолчанию 12px или какое-то другое необъяснимое и невосприимчивое значение.
Код button { font-size: inherit }
input { font-size: inherit }
Они примерно соответствуют букве «м» в текущем шрифте. Когда вы устанавливаете элемент font-size, он измеряет все emизмерения, которые он использует.
Эти измерения также применяются к детям элемента. Вот почему вы хотите переопределить базу font-size экономно. Если вы обнаружите, что делаете это, то вы делаете это неправильно:
Код .wrap { font-size: 1.5em }
.wrap .title { /* no overrides here, we cool with 1.5em */ }
.wrap .details { font-size: 0.66em }
.wrap .author { font-size: 0.55em }
Если вы обнаружите, что вы устанавливаете агрессивно малые em значения, чтобы переопределить неоправданно большое emзначение родителя, возможно, избавиться от значения родителя em.
Код .wrap { /* nuthin */ }
.wrap .title { font-size: 1.5em }
.wrap .details { /* .66 of 1.5 is 1, so no resizing needed here */ }
.wrap .author { font-size: 0.8em }
Но теперь обратите внимание, что вероятно можете использовать h2 для этого .title, где можете использовать small для них .author, а затем вам не нужны какие-либо специальные размеры.
Общее правило: использовать emдля переопределения других размеров шрифта относительным образом, но только при необходимости.
Мышление в относительных размерах привыкает, но оно может создавать простые страницы, которые великолепны на каждом экране, с минимальным CSS для поддержания или зависания
| | Страна: (RU) |
| |
