Reszponzív tipográfia létrehozása CSS-sel

Egy ilyen sok törésponttal rendelkező webhely fejlesztése kimerítő lehet. Sok új technikát kell megtanulni a CSS-ben, akár tapasztalt fejlesztő, akár középszintű fejlesztő vagy.

De hogyan kezdje el a reszponzív tipográfiát? Az alábbiakban bemutatjuk, hogyan kell a weboldalakat bármilyen képernyőmérethez igazítani.

A reszponzív tipográfia jelentősége

A tipográfia létfontosságú szerepet játszik a webfejlesztésben és -tervezésben azáltal, hogy biztosítja a weboldal olvashatóságát, használhatóságát és általános esztétikáját. Mindenki reszponzív weboldalra vágyik. Nem lenne nagyszerű, ha a szöveg vagy a betűtípusok automatikusan a különböző képernyőméretekhez igazodnának? A reszponzív tipográfia további előnyei a webfejlesztésben a következők:

• Javítja az általános felhasználói élményt különböző eszközökön vagy képernyőméreteken az olvashatóság és az olvashatóság biztosításával.
instagram viewer
• A látássérült vagy más fogyatékkal élő felhasználók elhelyezésével növeli a hozzáférhetőséget. Különféle felhasználói beállításokat, például állítható betűméretet alkalmaz.
• Az eszközök és felbontások következetes tipográfiája segít megőrizni a márkaidentitást és a vizuális egységet.

Íme egy kódsablon, amelyet bemásolhat a kódszerkesztőbe, mielőtt elkezdené, így követheti a tárgyalandó technikákat.

A HTML kódfájl

index.html
html>
<htmllang="en">
<fej>
<metakarakterkészlet="UTF-8">
<metanév="nézőablak"tartalom="szélesség = eszköz szélessége, kezdeti méret = 1,0">
<linkrel="stíluslap"href="stílus.css">
<cím> Reszponzív tipográfia cím>
fej>
<test>
<divosztály="tartály">
<h1> Lorem ipsum h1>
<p> 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! 
p>
div>
test>
html>

A CSS kódfájl

/*style.css*/
test{
kijelző: Flex;
indokolja-tartalom: központ;
align-ites: központ;
magasság: 100vh;
}
.tartály{
szélesség: 400px;
háttérszín: antik fehér;
párnázás: 15px;
doboz-árnyék:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
szín: dögös rózsaszín;
}

Most nézzünk meg néhány hatékony módszert és technikát a reszponzív tipográfia CSS használatával való megvalósítására

1. Befogás

Ez egy modern CSS tipográfiai technika, amely lehetővé teszi és biztosítja, hogy egy elem betűmérete egy bizonyos tartományon belül maradjon. A „Clamp()” befogó funkció három paramétert vesz fel: a minimális értéket, az ideális értéket és a maximális értéket. A szorító funkció nem korlátozódik a tipográfiára. Használható képekhez, kártyákhoz, videókhoz és egyéb médiához. Ez így működik.

Befogó (min. érték, ideális érték, max. érték):

h1{
betűméret: bilincs(2rem, 5vw, 3rem);
}
p{
betűméret: bilincs(1rem, 3vw, 2rem);
}

Ebben a példában a címsor és a bekezdés betűméretét a „clamp()” függvény segítségével állítjuk be. A „h1” címsor minimális értéke „2rem”, amely biztosítja, hogy a betűméret ne csökkenjen a gyökér betűméretének kétszerese alá. Az ideális vagy előnyben részesített érték „5vw”-ra van állítva, ami a nézetablak szélességének 5%-a, így reagál a különböző képernyőméretekre. A maximális érték „3 rem”, amely biztosítja, hogy a betűméret ne legyen nagyobb, mint a gyökér betűméret háromszorosa. A bekezdés stílusának fordítva.

A legjobb gyakorlat a nézetablak szélességének „vw” vagy százalékos „%” használata az ideális értékhez, mivel ez lehetővé teszi a tulajdonság arányos méretezését a rendelkezésre álló hely alapján, így a tervezés jobban reagál. Győződjön meg róla, hogy tudja melyik CSS egységet érdemes használni az Ön forgatókönyvéhez.

Ez a fejlesztők által használt leggyakoribb tipográfiai technika. Ez magában foglalja a médialekérdezések létrehozását minden törésponthoz. Lehetővé teszi bizonyos stílusok alkalmazását a különböző képernyőméretek alapján. Íme egy illusztráció:

/* Alapértelmezett betűméret */
h1{
betűméret: 38px;
}
p{
betűméret: 20px;
}
/* Betűméret kis képernyőkhöz */
@média (maximális szélesség:800 képpont){
h1{
betűméret: 32px;
}
p{
betűméret: 18px;
}
}
/* Betűméret kisebb képernyőkhöz */
@média (maximális szélesség:400 képpont){
h1{
betűméret: 28px;
}
p{
betűméret: 15px;
}
}

Ebben a példában a címsor és a bekezdés alapértelmezett értéke „38px” és „20px”. Ezután a feltételeket kisebb képernyőméretekre állítják be, hogy az elrendezés érzékeny legyen a mobiltelefonokon. Tetszőleges számú médialekérdezést hozhat létre a kívánt dizájn és válaszkészség alapján, sok egyéb mellett médialekérdezés CSS-trükkök, amelyeket tudnia kell.

3. CSS egyéni tulajdonságok

Más néven egyéni CSS-változók, olyan értékeket tárol, amelyek újra felhasználhatók a stílus során. Használható tipográfiára az egyszerű kezelés és testreszabás érdekében. Íme egy példa.

:gyökér {
--heading-font-size: 3rem;
--paragraph-font-size: 1.5rem;
}
h1{
betűméret: var(--heading-font-size);
}
p{
betűméret: var(--paragraph-font-size);
}
@média (maximális szélesség:800 képpont){
:gyökér {
--heading-font-size: 2rem;
--paragraph-font-size: 0.9rem;
}
}
@média (maximális szélesség:400 képpont){
:gyökér {
--heading-font-size: 1.5rem;
--paragraph-font-size: 0.8rem;
}
}

Ebben a példában a CSS-tulajdonság a gyökérszinten van beállítva, ami lehetővé teszi számunkra, hogy globálisan hozzáférjünk. A --heading-font-size és --paragraph-font-size a címsor és a bekezdés leíró nevei, mindkettőhöz alapértelmezett érték tartozik. Ez a technika újra felhasználható különféle médialekérdezésekhez, hogy biztosítsa a teljes konzisztenciát.

A reszponzív tipográfia legjobb gyakorlatai

A fejlesztők körében bevett gyakorlat, hogy a nézetablak szélességét (vw) közvetlenül használják a tipográfia végrehajtásához. Bár egyszerű és működőképesnek tűnik, kis képernyőméreteken kicsi, nagy képernyőn pedig rendkívül nagy lesz. Ez akkor is előfordul, amikor nagyít és kicsinyít az oldalról. Ha teheti, kerülje az ehhez hasonló nézetablak használatát;

h1{
betűméret: 2vh;
 }

Mindig tesztelje és győződjön meg arról, hogy a tipográfiája olvasható-e a különböző képernyőméreteken, és mindig tesztelje a böngésző kompatibilitását. Vegye figyelembe az olvashatóságot, és ügyeljen arra, hogy a betűméretek ne legyenek túl kicsik vagy túl nagyok

Reszponzív tipográfia az olvasható webdesign kulcsa

A reszponzív tipográfia kulcsszerepet játszik a webdesignban és -fejlesztésben. Az olyan módszerek és technikák megvalósításával, mint a rögzítés, a médialekérdezések és az egyéni CSS-tulajdonságok, biztosíthatja a tipográfiai skálázást a különböző képernyőméreteken és eszközökön. Nagyon sok technikát kell felfedezni, amikor CSS használatával próbálunk reagálni – használja ezeket a technikákat a szakértelem fejlesztéséhez ezen a területen.