Šajā rakstā ir paskaidrots, kā lietot pārtraukuma punktu un multivides vaicājumu kopā ar pozīcijas rekvizītu programmā Tailwind.
Kā izmantot pārtraukuma punktus un multivides vaicājumus, izmantojot pozīcijas īpašumu?
Pārtraukuma punkti ir galvenie bloki, lai izveidotu īpaši atsaucīgu dizainu. To izmanto, lai padarītu izkārtojumu pielāgojamu dažādiem ekrāna izmēriem. Multivides vaicājumi tiek izmantoti, lai elementiem piemērotu noteiktus stilus atkarībā no ekrāna izšķirtspējas. Pozīcijas atribūtu var lietot kopā ar tiem, lai padarītu izvadi optimizētāku.
1. darbība. Pozīcijas rekvizīta lietošana ar pārtraukuma punktiem un multivides vaicājumiem
Šajā solī programma tiek ievietota, lai piemērotu pozīcijas rekvizītu gar pārtraukumpunktiem vai multivides vaicājumiem atlasītajā “ lpp ” elements:
< ķermeni klasē = 'bg-slate-500' >
< div klasē = 'text-yellow-300 p-4 lg:p-8' >
< lpp klasē = 'relatīvais md:absolūtais md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4' > Šim tekstam būs dažādi fontu izmēri atkarībā no ekrāna izmēra. Tas būs mazāks uz maziem ekrāniem, vidēji liels uz vidējiem ekrāniem un lielāks uz lieliem ekrāniem. < / lpp >
< / div >
< / ķermeni >
Šajā kodā:
- ' bg-slate-500 ” iestata fona krāsu uz pelēku.
- ' teksts-dzeltens-300 ” maina teksta krāsu uz dzeltenu.
- ' p-4 ” pievieno 4 pikseļu polsterējumu.
- ' lg: p-8' pievieno 8 pikseļu polsterējumu lieliem ekrāniem.
- Sākotnējā pozīcija tiek iestatīta attiecībā pret vecāklapu, izmantojot ' radinieks ” klase.
- ' md:text-lg ” padara tekstu lielu uz vidēja izmēra ekrāna.
- “md:absolūts” maina teksta pozīciju no relatīvā uz absolūto uz vidēja izmēra ekrāna.
- ' md:translate-x-4” un “md:translate-y-4” pārvietojiet tekstu par 4 pikseļiem uz leju un pa labi uz vidēja izmēra ekrāna.
- ' lg:text-xl ” maina teksta lielumu uz īpaši lielu liela izmēra ekrānā.
- ' lg: statisks ” maina teksta pozīciju attiecībā pret vecāklapu no absolūtas uz statisku liela izmēra ekrānā
- ' lg:translate-x-4 ' un ' lg:translate-y-4 ” pārvietojiet tekstu par 4 pikseļiem uz leju un pa labi uz liela izmēra ekrāna.
2. darbība: pārbaudiet izvadi
Priekšskatiet tīmekļa lapu, kas izveidota, izmantojot iepriekš minēto kodu, un pielāgojiet ekrāna izmēru, lai redzētu izmaiņas, kā:
Var redzēt, ka teksts parāda atsaucīgu uzvedību vidēja un liela ekrāna izmērā.
Secinājums
Lai izmantotu pārtraukuma punktus un multivides vaicājumus programmā Tailwind, lietojiet pārtraukuma punktu un iestatiet multivides vaicājumu katram pārtraukuma punktam, kā arī mainiet pozīcijas rekvizītu dažādos ekrāna pārtraukuma punktos. Noklusējuma sadalījumi ir “ sm ',' md ',' lg ', un ' xl ”. Šajā emuārā ir parādīts, kā lietot pārtraukuma punktu un multivides vaicājumu ar pozīcijas rekvizītu programmā Tailwind.