Jednym z problemów jakie napotykamy podczas tworzenia strony responsywnej jest problem ze skalowaniem czcionek. Za każdym razem za pomocą breakpoints ustawiać wielkość czcionki. Dla konkretnego elementu.
W związku z tym że praktycznie zawsze korzystam z "rem" oraz "px" to aby podawać pełne wartości nie milion cyfr po przecinku np. "1.52293848rem" ustawiam pewien hack który to ułatwia.
Do elementu html dodaję:
html {
font-size: 62.5%;
}Jedynie za pomocą tej wartości mogę zrobić coś takiego jak ustawić "font-size: 20px" a także "font-size: 2rem" 🙂
Nie muszę przeliczać px na rem chodź i tak można zrobić to automatycznie w scss czy less, jakoś wolę ładne cyferki.
A może jest lepszy sposób na to aby za każdym razem nie zmieniać czcionki za pomocą breakpoints. No oczywiście że jest, ale raczej do wykorzystania do stron mało skomplikowanych jak landing page, jakieś prezentacje, itd. Nie widziałem tego rozwiązania w dużych projektach, ale może się mylę.
Dobra zaczynamy. Na początek zwykły tekst który będzie poddawany testom 🙂
<h1>JAKAŚ TREŚĆ</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque sunt quasi quis voluptate tempora laboriosam. Ipsa sequi earum debitis facilis. Modi dolor deserunt voluptatem, earum debitis suscipit blanditiis voluptate doloribus.</p>Teraz "mięsko" css:
/* 1rem(16px) @ 30rem(480px) increasing to 1.5rem(24px) @ 120rem(1920px) */
@media (min-width: 30rem) {
:root {
font-size: calc(1rem + ((1vw - 0.3rem) * 0.5556));
/* Where: * 0.5556 = 100 * font_Size_Difference / viewport_Width_Difference */
}
}
/* Prevent font scaling beyond this breakpoint */
@media (min-width: 120rem) {
:root {
font-size: 1.5rem;
}
}
body {
background-color: #fff;
color: #24292e;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
font-size: 1rem;
max-width: none;
padding: 1.618em 0 1rem;
line-height: 1.5;
}To rozwiązanie działa również na IE11 - przetestowane.
Niestety nie jestem pomysłodawcą tego rozwiązania w związku z tym podaję link do kalkulatora za pomocą, którego można dokładnie dobrać odpowiednie style. Wszystko opiera się o typ czcionki czy jest to px, rem, em. Wielkość czcionki, bo ustalamy jaka jest najmniejsza i największa. Ustalamy również minimalny i maksymalny braikpoint.
Wszystko to znajdziecie tutaj - [ responsive-font-calculator ]
Poniżej działający przykład.
See the Pen
responsive-font by Greg (@Tomik23)
on CodePen.
UPDATE:
Trochę czasu od daty publikacji tego postu mineło, a jak wiemy przeglądarki nie stoją w miejscu w związku z tym jest również nowy sposób zwiększania responsywnego czcionki.
Oczywiście to rozwiązanie nie będzie działać w IE11, ale warto je znać.
font-size: clamp(1.5rem, 3vw + 1rem, 4rem);1.5rem - jest to minimalna wielkość czcionki, 4rem jest to maksymalna wielkość czcionki zaś środkowy wpis 3vw + 1rem odpowiada za zwiększanie/zmniejszanie czcionki w zależności od vieportu.
Więcej tutaj clamp()
Polecam też wideo Kevina Powella "człowieka od css ;)"