Kuinka luoda reagoivaa typografiaa CSS: n avulla

Verkkosivuston kehittäminen, jossa on niin monia keskeytyskohtia, voi olla uuvuttavaa. CSS: ssä on monia uusia tekniikoita opeteltavaksi, olitpa sitten kokenut kehittäjä tai keskitason kehittäjä.

Mutta miten pääset alkuun reagoivan typografian kanssa? Näin voit mukauttaa verkkosivuja mihin tahansa näyttökokoon.

Responsiivisen typografian merkitys

Typografialla on tärkeä rooli web-kehityksessä ja -suunnittelussa varmistamalla verkkosivun luettavuuden, käytettävyyden ja yleisen esteettisyyden. Kaikki haluavat responsiivisen verkkosivuston. Eikö olisi hienoa, jos teksti tai kirjasimet mukautuisivat automaattisesti eri näyttökokoihin? Muita responsiivisen typografian etuja verkkokehityksessä ovat seuraavat:

• Se parantaa yleistä käyttökokemusta eri laitteilla tai erikokoisilla näytöillä varmistamalla luettavuuden ja luettavuuden.
• Se lisää saavutettavuutta ottamalla huomioon näkövammaiset tai muut vammaiset käyttäjät. Se mukautuu erilaisiin käyttäjien mieltymyksiin, kuten säädettäviin kirjasinkokoihin.
  instagram viewer
• Johdonmukainen typografia eri laitteissa ja resoluutioissa auttaa säilyttämään tuotemerkin identiteetin ja visuaalisen yhtenäisyyden.

Tässä on koodimalli, jonka voit kopioida koodieditoriin ennen aloittamista, jotta voit seurata käsiteltäviä tekniikoita.

HTML-kooditiedosto

index.html
html>
<htmllang="en">
<pää>
<metamerkkisetti="UTF-8">
<metanimi="näkymä"sisältö="leveys = laitteen leveys, alkumittakaava = 1,0">
<linkkirel="tyylitaulukko"href="tyyli.css">
<otsikko> Responsiivinen typografia otsikko>
pää>
<kehon>
<divluokkaa="kontti">
<h1> Lorem ipsum h1>
<s> 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! 
s>
div>
kehon>
html>

CSS-kooditiedosto

/*style.css*/
kehon{
näyttö: flex;
perustele-sisältö: keskusta;
kohdista-kohteet: keskusta;
korkeus: 100vh;
}
.container{
leveys: 400px;
taustaväri: antiikkivalkoinen;
pehmuste: 15px;
laatikko-varjo:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
väri: kuuma pinkki;
}

Tutkitaanpa nyt joitain tehokkaita menetelmiä ja tekniikoita reagoivan typografian toteuttamiseen CSS: n avulla

1. Kiinnitys

Tämä on moderni CSS-typografiatekniikka, joka mahdollistaa ja varmistaa, että elementin kirjasinkoko pysyy tietyllä alueella. Clamp-toiminto “Clamp()” ottaa kolme parametria, minimiarvon, ihannearvon ja maksimiarvon. Kiinnitystoiminto ei rajoitu typografiaan. Sitä voidaan käyttää kuville, korteille, videoille ja muulle medialle. Näin se toimii.

Kiinnitin (min-arvo, ideaal-arvo, maksimiarvo):

h1{
Fonttikoko: puristin(2rem, 5vw, 3rem);
}
s{
Fonttikoko: puristin(1rem, 3vw, 2rem);
}

Tässä esimerkissä otsikon ja kappaleen fonttikoot asetetaan "clamp()"-toiminnolla. Otsikon "h1" vähimmäisarvoksi asetetaan "2rem", jotta fonttikoko ei putoa alle kaksinkertaisen juurifontin koon. Ihanteellinen tai ensisijainen arvo on asetettu arvoon "5vw", joka on 5 % näkymän leveydestä, joten se reagoi eri näyttökokoihin. Enimmäisarvoksi on asetettu "3 rem", jotta fonttikoko ei ole suurempi kuin kolme kertaa juurikirjasimen koko. Päinvastoin kappaletyylille.

Paras käytäntö on käyttää näkymän leveyttä "vw" tai prosenttiosuutta "%" ihanteellinen arvo, koska se sallii ominaisuuden skaalata suhteellisesti käytettävissä olevan tilan perusteella, mikä tekee suunnittelusta reagoivamman. Varmista, että tiedät mitä CSS-yksikköä sinun tulee käyttää skenaariosi mukaan.

Tämä on yleisin kehittäjien käyttämä typografiatekniikka. Se sisältää mediakyselyjen luomisen kullekin keskeytyspisteelle. Sen avulla voit käyttää tiettyjä tyylejä eri näyttökokojen perusteella. Tässä on esimerkki:

/* Oletusfontin koko */
h1{
Fonttikoko: 38px;
}
s{
Fonttikoko: 20px;
}
/* Fonttikoko pienille näytöille */
@media (suurin leveys:800 pikseliä){
h1{
Fonttikoko: 32px;
}
s{
Fonttikoko: 18px;
}
}
/* Fonttikoko pienemmille näytöille */
@media (suurin leveys:400 pikseliä){
h1{
Fonttikoko: 28px;
}
s{
Fonttikoko: 15px;
}
}

Tässä esimerkissä otsikko ja kappale on asetettu oletusarvoiksi "38px" - "20px". Sitten asetetaan ehtoja pienemmille näytöille, jotta asettelu olisi responsiivinen matkapuhelimissa. Voit luoda niin monta mediakyselyä kuin haluat haluamasi suunnittelun ja responsiivisuuden sekä monien muiden mediakyselyn CSS-temppuja, jotka sinun pitäisi tietää.

3. CSS: n mukautetut ominaisuudet

Se tunnetaan myös nimellä CSS-muokatut muuttujat, ja se tallentaa arvoja, joita voidaan käyttää uudelleen koko tyylin ajan. Sitä voidaan käyttää typografiassa helpon hallinnan ja mukauttamisen mahdollistamiseksi. Tässä on esimerkki.

:root {
--heading-font-size: 3rem;
--kappale-font-size: 1.5 rem;
}
h1{
Fonttikoko: var(--heading-font-size);
}
s{
Fonttikoko: var(--kappale-font-size);
}
@media (suurin leveys:800 pikseliä){
:root {
--heading-font-size: 2rem;
--kappale-font-size: 0.9rem;
}
}
@media (suurin leveys:400 pikseliä){
:root {
--heading-font-size: 1.5 rem;
--kappale-font-size: 0.8rem;
}
}

Tässä esimerkissä CSS-ominaisuus on asetettu juuritasolle, jolloin voimme käyttää sitä maailmanlaajuisesti. --heading-font-size ja --paragraph-font-size ovat kuvailevia nimiä otsikolle ja kappaleelle, ja molemmille on annettu oletusarvot. Tätä tekniikkaa voidaan käyttää uudelleen erilaisissa mediakyselyissä johdonmukaisuuden varmistamiseksi kaikkialla.

Responsiivisen typografian parhaat käytännöt

Kehittäjien keskuudessa on yleinen käytäntö käyttää näkymän leveyttä (vw) suoraan typografian suorittamiseen. Vaikka se on yksinkertainen ja näyttää toimivan, siitä tulee pieni pienillä näytöillä ja erittäin suuri suurilla näytöillä. Tämä tapahtuu myös, kun lähennät ja loitonnat sivuasi. Jos voit, vältä näkymän käyttämistä suoraan tällä tavalla;

h1{
Fonttikoko: 2vh;
 }

Testaa ja varmista aina, että typografiasi on luettavissa eri näytöillä ja testaa aina selaimen yhteensopivuus. Harkitse luettavuutta ja varmista, etteivät fonttikoot ole liian pieniä tai liian suuria

Responsiivinen typografia avain luettavaan verkkosuunnitteluun

Responsiivisella typografialla on keskeinen rooli web-suunnittelussa ja -kehityksessä. Ottamalla käyttöön menetelmiä ja tekniikoita, kuten kiinnitystä, mediakyselyitä ja mukautettuja CSS-ominaisuuksia, voit varmistaa, että typografia skaalautuu eri näytöissä ja laitteissa. On niin monia tutkittavia tekniikoita, kun yrität luoda reagointikykyä CSS: n avulla - käytä näitä tekniikoita kehittääksesi asiantuntemusta tällä alalla.