Šiame tinklaraštyje bus parodytas medijos užklausų ir lūžio taškų taikymo procesas naudojant perslinkimo įrankį programoje Tailwind.
Kaip taikyti medijos užklausas ir lūžio taškus naudojant „Overscroll“ sistemoje „Tailwind“?
Norėdami pritaikyti lūžio taškus ar kitus jo pavadinimo medijos užklausas, kai kalbama apie CSS su „ perslinkti ' naudingumas. HTML programa yra sukurta ir taiko skirtingus lūžio taškus ' sm ', ' md “ arba „ lg “ su tinkamomis naudingumo klasėmis iš „overscroll“ programos. Tai pakeičia elementų slinkimą skirtingo dydžio ekranuose.
1 veiksmas: naudokite lūžio taškus ir medijos užklausas HTML kode
Sukurkite HTML dokumentą ir pritaikykite lūžio taškus, kurie yra ekrano dydžiai ir medijos užklausos kiekvienam lūžio taškui. Pavyzdžiui ' md “ ir „ lg “ lūžio taškai naudojami toliau pateiktame teksto dydžio kode ir jam taikoma perslinkimo elgsena:
< kūnas klasė = 'bg-slate-500' >
< div klasė = 'text-red-900 p-4 lg:p-8' >
< p klasė = 'santykinis md:absoliutus md:overscroll-contain md:text-lg md:translate-x-4 md:translate-y-4 lg:overscroll-none lg:text-xl lg:static lg:translate-x-4 lg :translate-y-4 ' > Šis tekstas turės skirtingus šrifto dydžius, atsižvelgiant į ekrano dydį. Tai bus mažesni mažuose ekranuose , vidutinis - vidutinio dydžio ekranuose , ir didesni dideliuose ekranuose. p >
div >
kūnas >
Šiame kode:
- “ bg-slate-500 “ nustato fono spalvą į pilką.
- “ tekstas-raudonas-900 “ pakeičia teksto spalvą į raudoną.
- “ p-4 “ prideda 4 pikselių užpildymą.
- “ lg: p-8 “ prideda 8 pikselių užpildymą dideliuose ekranuose.
- Pradinė padėtis “ žyma nustatoma pirminio puslapio atžvilgiu naudojant „ giminaitis ' klasė.
- “ md:absoliutus “ pakeisti teksto padėtį iš santykinio į absoliučią vidutinio dydžio ekrane.
- “ md:overscroll-contain “ užtikrina, kad „perslinkimo“ elgesys būtų įtrauktas į tą elementą, o ne paveiktų visą puslapį, kai ekranas yra vidutinio dydžio.
- “ md:text-lg “ tekstas tampa didelis vidutinio dydžio ekrane.
- “ md:translate-x-4 “ ir „ md:translate-y-4 'perkelti tekstą' 4 piks “ žemyn ir dešinėn vidutinio dydžio ekrane.
- “ lg:overscroll-none “ nustato “ perslinkti “ klasės nuosavybė didelio dydžio ekrane.
- “ lg:text-xl “ pakeičia teksto dydį į itin didelį didelio ekrano ekrane.
- “ lg:statinis “ pakeičia teksto padėtį pirminio puslapio atžvilgiu iš absoliučios į statinę didelio ekrano ekrane
- “ lg:translate-x-4 “ ir „ lg:translate-y-4 “ perkelkite tekstą 4 pikseliais žemyn ir į dešinę dideliame ekrane.
2 veiksmas: peržiūrėkite išvestį
Dabar peržiūrėkite tinklalapį, sukurtą vykdant aukščiau pateiktą HTML kodą, ir pakeiskite HTML svetainės ekrano dydį, kad pamatytumėte matomus pakeitimus:
Aukščiau esančiame ekrane „ perslinkti “ elgesys matomas ir sumažinus ekrano dydį matyti, kad teksto dydis keičiasi dėl jam taikomų medijos užklausų.
Išvada
Norėdami pritaikyti medijos užklausas ir lūžio taškus naudodami „ perslinkti “ naudingumą, nurodykite lūžio taškus su kokia nors norima klase iš „overscroll“ programos. Keičiant ekrano dydį, medijos užklausos koreguoja ekrano išvestį. Šiame tinklaraštyje parodytas žiniasklaidos užklausų ir lūžio taškų taikymas naudojant „perslinkimo“ elgseną „Tailwind“.