Как да създадете адаптивна типография с CSS

Разработването на уебсайт с толкова много точки на прекъсване може да бъде изтощително. Има много нови техники за учене в CSS, независимо дали сте опитен разработчик или разработчик на средно ниво.

Но как да започнете с адаптивната типография? Ето как да предприемете стъпки за адаптиране на уеб страници към всеки размер на екрана.

Значението на адаптивната типография

Типографията играе жизненоважна роля в уеб разработката и дизайна, като гарантира четивността, използваемостта и цялостната естетика на уебсайта. Всеки иска отзивчив уебсайт. Не би ли било чудесно, ако текстът или шрифтовете автоматично се настройват към различните размери на екрана? Други предимства на отзивчивата типография в уеб разработката включват следното;

• Той подобрява цялостното потребителско изживяване на различни устройства или размери на екрана, като осигурява четливост и четливост.
instagram viewer
• Увеличава достъпността чрез приспособяване към потребители със зрителни увреждания или други увреждания. Той се приспособява към различни потребителски предпочитания, като регулируеми размери на шрифта.
• Съгласуваната типография на различни устройства и разделителни способности помага да се запази идентичността на марката и визуалното единство.

Ето шаблон на код, който можете да копирате във вашия редактор на код, преди да започнете, за да можете да следвате техниките, които ще бъдат обсъдени.

Файлът с HTML код

index.html
html>
<htmlезик="bg">
<глава>
<метанабор от знаци="UTF-8">
<метаиме="viewport"съдържание="width=device-width, initial-scale=1.0">
<връзкаотн="стилов лист"href="style.css">
<заглавие> Адаптивна типография заглавие>
глава>
<тяло>
<дивклас="контейнер">
<h1> Lorem ipsum h1>
<стр> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, obcaecati. Corporis quam, blanditiis odit optio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis! 
стр>
див>
тяло>
html>

Файлът с CSS код

/*style.css*/
тяло{
дисплей: flex;
justify-content: център;
подравняване на елементи: център;
височина: 100vh;
}
.контейнер{
ширина: 400px;
Цвят на фона: antiquewhite;
подплата: 15px;
кутия-сянка:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
цвят: горещо розово;
}

Сега, нека проучим някои ефективни методи и техники за прилагане на отзивчива типография с помощта на CSS

1. Затягане

Това е модерна CSS типографска техника, която позволява и гарантира, че размерът на шрифта на елемент остава в определен диапазон. Функцията за затягане „Clamp()“ приема три параметъра, минималната стойност, идеалната стойност и максималната стойност. Функцията за захващане не се ограничава до типография. Може да се използва за изображения, картички, видеоклипове и други медии. Ето как работи.

Скоба (минимална стойност, идеална стойност, максимална стойност):

h1{
размер на шрифта: скоба(2рем, 5vw, 3рем);
}
стр{
размер на шрифта: скоба(1рем, 3vw, 2рем);
}

В този пример размерите на шрифта за заглавието и абзаца се задават с помощта на функцията „clamp()“. За заглавието „h1“ минималната стойност е зададена на „2rem“, което гарантира, че размерът на шрифта няма да падне под два пъти основния размер на шрифта. Идеалната или предпочитана стойност е зададена на „5vw“, което е 5% от ширината на прозореца за изглед, което го прави чувствителен към различни размери на екрана. Максималната стойност е зададена на „3 rem“, което гарантира, че размерът на шрифта няма да бъде по-голям от три пъти размера на главния шрифт. Обратно за стила на абзаца.

Най-добрата практика е да използвате ширина на прозореца за изглед „vw“ или процент „%“ за идеалната стойност, тъй като позволява на свойството да се мащабира пропорционално въз основа на наличното пространство, което прави дизайна по-отзивчив. Уверете се, че знаете коя CSS единица трябва да използвате за вашия сценарий.

Това е най-разпространената типографска техника, използвана от разработчиците. Това включва създаване на медийни заявки за всяка точка на прекъсване. Тя ви позволява да прилагате специфични стилове въз основа на различни размери на екрана. Ето една илюстрация:

/* Размер на шрифта по подразбиране */
h1{
размер на шрифта: 38px;
}
стр{
размер на шрифта: 20px;
}
/* Размер на шрифта за малки екрани */
@медия (максимална ширина:800 пиксела){
h1{
размер на шрифта: 32px;
}
стр{
размер на шрифта: 18px;
}
}
/* Размер на шрифта за по-малки екрани */
@медия (максимална ширина:400 пиксела){
h1{
размер на шрифта: 28px;
}
стр{
размер на шрифта: 15px;
}
}

В този пример заглавието и абзацът са зададени на стойност по подразбиране съответно от „38px“ до „20px“. След това се задават условия за по-малки размери на екрана, за да се направи оформлението отзивчиво на мобилните телефони. Можете да създадете толкова медийни заявки, колкото желаете въз основа на дизайна и отзивчивостта, които желаете, наред с много други CSS трикове за медийни заявки, които трябва да знаете.

3. Персонализирани свойства на CSS

Известен също като потребителски променливи на CSS, той съхранява стойности, които могат да се използват повторно във вашия стил. Може да се използва за типография, за да позволи лесно управление и персонализиране. Ето един пример.

: корен {
--heading-font-size: 3рем;
--параграф-размер на шрифта: 1.5rem;
}
h1{
размер на шрифта: вар(--heading-font-size);
}
стр{
размер на шрифта: вар(--параграф-размер на шрифта);
}
@медия (максимална ширина:800 пиксела){
: корен {
--heading-font-size: 2рем;
--параграф-размер на шрифта: 0.9rem;
}
}
@медия (максимална ширина:400 пиксела){
: корен {
--heading-font-size: 1.5rem;
--параграф-размер на шрифта: 0.8rem;
}
}

В този пример CSS свойството е зададено на основно ниво, което ни позволява глобален достъп до него. --heading-font-size и --paragraph-font-size са описателни имена за заглавието и параграфа, съответно, със стойности по подразбиране, дадени и на двете. Тази техника може да се използва повторно за различни медийни заявки, за да се осигури последователност във всички области.

Най-добри практики за адаптивна типография

Обичайна практика сред разработчиците е да използват директно ширината на прозореца за изглед (vw) за извършване на типография. Въпреки че е прост и изглежда, че работи, той става малък на малки размери на екрана и изключително голям на големи размери на екрана. Това също се случва, когато увеличавате и намалявате страницата си. Ако можете, избягвайте да използвате viewport директно по този начин;

h1{
размер на шрифта: 2vh;
 }

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

Адаптивната типография е ключът към четливия уеб дизайн

Отзивчивата типография играе ключова роля в уеб дизайна и разработката. Чрез прилагане на методите и техниките като затягане, медийни заявки и персонализирани свойства на CSS, можете да гарантирате, че вашата типография се мащабира в различни размери на екрана и устройства. Има толкова много техники за изследване, когато се опитвате да създадете отзивчивост с помощта на CSS – използвайте тези техники, за да започнете да развивате опит в тази област.