Приветствую. Когда говорят об адаптивности, то обычно речь заходит о сетках и блоках. Но также важно адаптировать шрифты сайта под различные разрешения. Как это делать, узнаем сегодня.
Я поделюсь с вами одной фишкой, как верстать сайты более правильно. Наверняка все вы задаете размер шрифта в пикселях, верно? Это достаточно простой и удобный подход, но у него есть 1 проблема — при смене масштаба или размера шрифта в настройках браузера иногда могут возникать определенные проблемы.
Чтобы их вообще не было, нужно задавать все размеры с помощью относительной единицы em. Чтобы корректно это делать, для начала необходимо сбросить все css-настройки, которые браузер сам ставит по умолчанию.
О том, как это делать, вы можете прочитать в этой статье, там же находится нужный код. В частности, если вы просмотрите тот код, то одна из строк в нем такая:
font-size: 100%;
Такой размер шрифта задается для всех элементов. Что значит 100%? Запомните, что в пикселях это равно шестнадцати (16px). Итак, 100% = 16рх.
Что делать дальше?
Отлично, от этого мы и будем плясать. Смотрите в макет на размеры шрифтов и задаете их не в пикселях, а в em. Расчет такой: 1em = 16px и 1em = 100%.
Например, заголовкам нужно задать размер шрифта 30 пикселей. Хорошо, берем калькулятор и делим 30 на 16. Получается 1,875. Теперь остается только прописать это в стилях:
selector{
font-size: 1,875em;
}
Или какой-то подсказке в форме, например, нужно задать размер текста 9 пикселей:
9/16 = 0,5625 em.
Все достаточно просто. Задав все размеры шрифтов именно в таком стиле, вы можете не бояться изменения размера шрифта в настройках браузера, так как все поменяется равномерно и читать контент на вашем сайте будет удобно при любых настройках и на любых разрешениях (правда тут уже многое зависит и от общей адаптивности шаблона).
Все, на этом вся фишка. Надеюсь, кому-нибудь была полезна и пригодится при верстке.
Сколько статей по CSS)))