Šiame straipsnyje bus paaiškinta, kaip naudoti lūžio tašką ir medijos užklausą kartu su pozicijos ypatybe programoje Tailwind.
Kaip panaudoti lūžio taškus ir medijos užklausas su pozicijos nuosavybe?
Lūžio taškai yra pagrindiniai blokai kuriant itin jautrų dizainą. Jis naudojamas, kad išdėstymas būtų pritaikytas skirtingiems ekrano dydžiams. Medijos užklausos naudojamos nurodytiems stiliams pritaikyti elementams, atsižvelgiant į ekrano skiriamąją gebą. Padėties atributas gali būti taikomas kartu su jais, kad išvestis būtų labiau optimizuota.
1 veiksmas: pozicijos ypatybės taikymas su lūžio taškais ir medijos užklausomis
Šiame žingsnyje programa įterpiama, kad pozicijos ypatybė būtų pritaikyta pertraukos taškams arba medijos užklausoms per pasirinktą ' p “ elementas:
< kūnas klasė = 'bg-slate-500' >
< div klasė = 'tekstas-geltonas-300 p-4 lg:p-8' >
< p klasė = 'santykinis md:absoliutus md:tekstas-lg md:translate-x-4 md:translate-y-4 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į. Mažuose ekranuose jis bus mažesnis, vidutiniuose – vidutinio dydžio, o dideliuose – didesnis. < / p >
< / div >
< / kūnas >
Šiame kode:
- “ bg-slate-500 “ nustato fono spalvą į pilką.
- “ tekstas-geltonas-300 “ pakeičia teksto spalvą į geltoną.
- “ p-4 “ prideda 4 pikselių užpildymą.
- “ lg: p-8' prideda 8 pikselių užpildymą dideliuose ekranuose.
- Pradinė padėtis nustatoma pirminio puslapio atžvilgiu naudojant „ giminaitis ' klasė.
- “ md:text-lg “ tekstas tampa didelis vidutinio dydžio ekrane.
- 'md:absoliutus' pakeičia teksto padėtį iš santykinio į absoliučią vidutinio dydžio ekrane.
- “ md:translate-x-4' ir 'md:translate-y-4' vidutinio dydžio ekrane perkelkite tekstą 4 pikseliais žemyn ir į dešinę.
- “ lg:text-xl “ pakeičia teksto dydį į itin didelį didelio dydžio ekrane.
- “ lg: statinis “ pakeičia teksto padėtį pirminio puslapio atžvilgiu iš absoliučios į statinę didelio dydžio ekrane
- “ lg:translate-x-4 “ ir „ lg:translate-y-4 “ perkelkite tekstą 4 pikseliais žemyn ir į dešinę dideliame ekrane.
2 veiksmas: patikrinkite išvestį
Peržiūrėkite anksčiau pateiktu kodu sukurtą tinklalapį ir pakoreguokite ekrano dydį, kad pamatytumėte pakeitimą:
Galima pastebėti, kad tekstas rodo reaguojantį elgesį vidutinio ir didelio ekrano dydžiuose.
Išvada
Norėdami naudoti lūžio taškus ir medijos užklausas programoje Tailwind, kiekvienam lūžio taškui taikykite lūžio tašką ir nustatykite medijos užklausą, taip pat pakeiskite padėties ypatybę skirtinguose ekrano taškuose. Numatytasis suskirstymas yra ' sm ', ' md ', ' lg “ ir „ xl “. Šiame tinklaraštyje parodyta, kaip „Tailwind“ naudoti lūžio tašką ir medijos užklausą su pozicijos ypatybe.