Šajā emuārā tiks parādīts multivides vaicājumu un pārtraukuma punktu pielietošanas process, izmantojot pārritināšanas utilītu programmā Tailwind.
Kā lietot multivides vaicājumus un pārtraukuma punktus, izmantojot pārritināšanu programmā Tailwind?
Lai lietotu pārtraukuma punktus vai tā citu nosaukumu multivides vaicājumus, kad runa ir par CSS ar “ pārritināt ” lietderība. HTML programma ir izveidota un izmanto dažādus pārtraukuma punktus ' sm ',' md ” vai “ lg ” ar piemērotām utilīta klasēm no utilīta “overscroll”. Tas maina vienumu ritināšanas uzvedību dažādos ekrāna izmēros.
1. darbība. Izmantojiet pārtraukuma punktus un multivides vaicājumus HTML kodā
Izveidojiet HTML dokumentu un lietojiet pārtraukuma punktus, kas ir ekrāna izmēri un multivides vaicājumi katram pārtraukuma punktam. Piemēram ' md ' un ' lg Pārtraukuma punkti tiek izmantoti tālāk esošajā kodā teksta izmēram, un tam tiek piemērota pārritināšanas darbība:
< ķermeni klasē = 'bg-slate-500' >
< div klasē = 'text-red-900 p-4 lg:p-8' >
< lpp klasē = 'relative md:absolute 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' > Šim tekstam būs dažādi fontu izmēri atkarībā no ekrāna izmēra. Tas uz maziem ekrāniem būs mazāks , vidējs - izmēra uz vidējiem ekrāniem , un lielāki uz lieliem ekrāniem. lpp >
div >
ķermeni >
Šajā kodā:
- ' bg-slate-500 ” iestata fona krāsu uz pelēku.
- ' teksts-sarkans-900 ” maina teksta krāsu uz sarkanu.
- ' 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 ' ' tags ir iestatīts attiecībā pret vecāklapu, izmantojot ' radinieks ” klase.
- ' md:absolūts ” mainīt teksta pozīciju no relatīvā uz absolūto uz vidēja izmēra ekrāna.
- ' md:overscroll-contain ” nodrošina, ka “pārritināšanas” darbība tiek ietverta šajā elementā, nevis ietekmē visu lapu, ja ekrāns ir vidēja izmēra.
- ' md:text-lg ” padara tekstu lielu uz vidēja izmēra ekrāna.
- ' md:translate-x-4 ' un ' md:translate-y-4 'pārvietot tekstu' 4 pikseļi ” uz leju un pa labi uz vidēja izmēra ekrāna.
- ' lg:overscroll-none ' iestata ' pārritināt ” klases īpašums uz liela izmēra ekrāna.
- ' lg:text-xl ” maina teksta lielumu uz īpaši lielu liela izmēra ekrānam.
- ' lg: statisks ” maina teksta pozīciju attiecībā pret vecāklapu no absolūtas uz statisku liela izmēra ekrānam
- ' lg:translate-x-4 ' un ' lg:translate-y-4 ” pārvietojiet tekstu par 4 pikseļiem uz leju un pa labi uz liela ekrāna.
2. darbība: priekšskatiet izvadi
Tagad priekšskatiet tīmekļa lapu, kas izveidota, izpildot iepriekš minēto HTML kodu, un mainiet HTML vietnes ekrāna izmēru, lai redzētu redzamās izmaiņas:
Iepriekš redzamajā ekrānā “ pārritināt ” uzvedība ir redzama un, samazinot ekrāna izmēru, var redzēt, ka teksta lielums mainās atkarībā no tam piemērotajiem multivides vaicājumiem.
Secinājums
Lai lietotu multivides vaicājumus un pārtraukuma punktus ar “ pārritināt ” utilītu, norādiet pārtraukuma punktus ar kādu vēlamo klasi no utilīta “overscroll”. Mainot ekrāna izmēru, multivides vaicājumi pielāgo ekrāna izvadi. Šis emuārs ir demonstrējis multivides vaicājumu un pārtraukuma punktu pielietošanas procesu ar “pārritināšanas” darbību programmā Tailwind.