Андрей Палий
Рад если статья оказалась вам полезной, а еще буду рад вашим комментариям и вопросам, спасибо!
Не частый вопрос, который даже сложно найти в интернете, как же пропорционально изменять размер шрифта при изменении разрешения? Если вы дизайнера без знания верстки вам будет трудновато, но попробуйте.
Пример Вопроса:
У вас разрешение 1920px. (рабочая область 1110px.) а Н1 – 47px., сколько он (Н-1) будет px если разрешение будет >768px.?
Ответ: Все просто – 31px., а решили эту задачу с помощью сайта gridlover.net и медиа запросов. Используя «em» а не «px», (хотя и px хороши, но em имеют тысячные доли)
html, .root {
font-size: 12px;
line-height: 15px;
}
body, .article {
font-family: sans-serif;
font-size: 1em;
line-height: 1.25em;
max-width: 560px;
margin: auto;
}
h1, .h1 {
font-size: 4.25em;
line-height: 1.17647059em;
margin-top: 0.29411765em;
margin-bottom: 0.5882353em;
}
h2, .h2 {
font-size: 2.58333333em;
line-height: 1.4516129em;
margin-top: 0.48387097em;
margin-bottom: 0.48387097em;
}
h3, .h3 {
font-size: 1.58333333em;
line-height: 1.57894737em;
margin-top: 0.78947368em;
margin-bottom: 0em;
Медиа запрос используется по примеру:
@media screen and (max-width: 960px ) {
html {
font-size: 13px;
}
}
@media screen and (max-width: 767px ) {
html {
font-size: 12px;
}
}
@media screen and (max-width: 640px ) {
html {
font-size: 11px;
}
}
@media screen and (max-width: 480px ) {
html {
font-size: 10px;
}
}
@media screen and (max-width: 320px ) {
html {
font-size: 9px;
}
}
Меня font-size для тега html мы задаем пропорции всем заголовком от H1 до Н5 и не только.
Разберемся в параметрах сайта gridlover.net, что такое Scale factor (масштаб) и почему он 1,618? И почему Line height (высота линий) 1,3 (советую ≈ 1.25, почему? можно почитать в статье «Как рассчитать межстрочное расстояние»)
1,618 – Золотое сечение, первые его цифры, думаю если не знаете, то погуглете, масштабирование будет вестись с помощью пропорций, которые придумали ок. 300 лет до н. э.
Кстати так и bootstrap придумали, но об этом в другой раз.
1,3 – потому что это самые оптимальные значения, так закладывается усредненное значение межстрочного интервала (советую ≈ 1.25, почему? можно почитать в статье «Как рассчитать межстрочное расстояние»).
Надеюсь вам все понятно, если нет задавайте вопросы и спасибо за внимание!
0
Андрей Палий
Рад если статья оказалась вам полезной, а еще буду рад вашим комментариям и вопросам, спасибо!
Комментарии ( 0 )
Для того, чтобы оставить комментарий Вам нужно войти на сайт или зарегистрироваться.