Suunnitellessaan responsiivista verkkosivustoa Tailwind ' Katkopisteet ' ja ' Mediakyselyt ” on avainasemassa useiden toimintojen soveltamisessa, jotka voidaan mukauttaa kätevästi erikokoisiin näyttöihin. Nämä ominaisuudet on määritettävä eri luokkien kautta, esim. md (keskikokoiset näytöt)', 'lg (suurikokoinen näyttö)' tai '@media' ” sääntö, joka liittää toiminnot määritettyyn ehtoon.
Tämä artikkeli kattaa seuraavan sisällön:
- Kuinka käyttää tekstin koristelupaksuutta myötätuulen rajapisteillä ja mediakyselyillä?
- Tekstin koristelupaksuuden käyttäminen myötätuulen rajapisteillä.
- Tekstin koristelupaksuuden käyttäminen Tailwind Media -kyselyillä.
Kuinka käyttää tekstin koristelupaksuutta myötätuulen rajapisteillä ja mediakyselyillä?
' Tekstin koristelu Paksuus ' voidaan soveltaa '' teksti-koriste-paksuus ”-ominaisuuden jälkeen tavoitepaksuusarvo pikseleinä. Nämä pikselit voivat olla ' 1px, 2px, 4px tai 8px ”. ' Katkopisteet ' käytetään mukauttamaan erilaisia käytettyjä toimintoja käyttäjän näytön koon mukaan käyttämällä ' md (keskikokoiset näytöt)', 'lg (suurikokoinen näyttö) ' luokat jne. ' Mediakyselyt ' ottaa käyttöön ehdolliset toteutustyylit selaimen ja käyttöjärjestelmän parametrien perusteella @-merkin avulla media ”sääntö.
Esimerkki 1: Tekstin koristelupaksuuden käyttäminen myötätuulen rajapisteillä
Tässä esimerkissä tekstin koristelupaksuus asetetaan eri kohtiin, jotta voidaan soveltaa tyyliä, joka vaihtelee näytön koon mukaan:
< html >
< pää >
< meta merkkisetti = 'utf-8' >
< meta nimi = 'näkymä' sisältö = 'width=device-width, original-scale=1' >
< otsikko >< / otsikko >
< käsikirjoitus src = 'https://cdn.tailwindcss.com' >< / käsikirjoitus >
< / pää >
< kehon >
< tekstialue luokkaa = 'alleviivaa md:decoration-8 lg:box-decoration-slice text-black text-2xl' id = 'lämpö' > Tämä on Linuxhint < / tekstialue >
< / kehon >
< / html >
Käytä alla annettuja ohjeita tämän koodinpätkän mukaan:
- Sisällytä ensin CDN-polku käyttääksesi Tailwind-toimintoja.
- Tee sitten '< tekstialue >' elementti ja sisällytä ilmoitetut tekstin koristelupaksuudet oletus- ja keskikokoisilla näytöillä ' md ” luokkaa.
- ' teksti - musta ' ja ' teksti-2xl ” luokat jakavat tekstille värin (musta) ja fontin koon eli 2xl.
Lähtö
Tästä tuloksesta voidaan päätellä, että tekstin koristelupaksuus on sovitettu vaihtelevan näytön kokoon sopivasti.
Esimerkki 2: Tekstin koristelupaksuuden käyttäminen Tailwind Media -kyselyillä
'@ media ” -sääntöä käytetään Mediakyselyissä toteuttamaan erilaisia tyylejä eri mediatyypeille/laitteille. Tämä esittely käyttää näitä mediakyselyitä tekstin paksuuden koristeluun tietyn parametrin/ehdon perusteella:
< html >
< pää >
< meta merkkisetti = 'utf-8' >
< meta nimi = 'näkymä' sisältö = 'width=device-width, original-scale=1' >
< otsikko >< / otsikko >
< käsikirjoitus src = 'https://cdn.tailwindcss.com' >< / käsikirjoitus >
< / pää >
< kehon >
< h1 id = 'lämpö' >Tämä on Linuxvintti< / h1 >
< / kehon >
< / html >
< tyyli tyyppi = 'teksti/css' >
#lämpö {
tekstin koristelu: alleviivaus;
teksti- kohdistaa : keskus;
}
@ media ( max- leveys :550px ) {
#lämpö {
teksti-koriste-paksuus: 4px;
} }
< / tyyli >
Harkitse tässä koodilohkossa alla olevia menetelmiä:
- Sisällytä myös CDN-polku.
- Lisää sitten '< h1 >' elementtiä, jolla on ilmoitettu 'id'.
- Koodin CSS-osassa, '< tyyli >' -tunniste, tyylillä mukana oleva otsikko.
- Luo myös '@' media 'sääntö, joka soveltaa ehtoa siten, että niin kauan kuin näytön leveys on ' 550 pikseliä ”, tekstin koristelupaksuus on asetettu arvoon 4 ”pikseliä.
- Se on sellainen, että kun näytön leveys ylittää tämän rajan, teksti yksinkertaisesti alleviivataan.
Lähtö
Tämä tulos tarkoittaa, että @media-sääntöä eli mediakyselyjä sovelletaan näytön leveyden mukaan.
Johtopäätös
Katkopisteitä ja mediakyselyjä voidaan soveltaa tekstin koristelupaksuuksilla näyttämään käytetyt toiminnot käyttäjän näytön koon mukaan käyttämällä erilaisia luokkia, kuten ' md', 'lg ' tai '@' kautta media ”sääntöä vastaavasti. Jälkimmäinen lähestymistapa on määritelty kohdassa ' CSS ” koodi, joka kutsuu kohdeelementin ja koristaa sen asetetun parametrin/ehdon perusteella. Tässä oppaassa käsiteltiin tekstin koristelun paksuuden käyttämistä Tailwind Breakpoint- ja Media Queries -kyselyillä.