Ta zapis bo ponazoril metodo za uporabo odzivnih prelomnih točk v Tailwind CSS.
Kako uporabiti odzivne prelomne točke v Tailwindu?
Če želite uporabiti odzivne prekinitvene točke v Tailwindu, uporabite odzivne modifikatorje, kot je » sm ”, “ md ”, “ lg ”, “ xl « in » 2xl ” z drugimi razredi v programu HTML. Nato si oglejte spletno stran HTML in spremenite velikost zaslona, da zagotovite pravilno delovanje prekinitvenih točk.
1. korak: uporabite odzivne modifikatorje v programu HTML
Naredite program HTML in uporabite odzivne modifikatorje z želenim slogom. Na primer, uporabili smo ' sm ”, “ md ”, “ lg ”, “ xl « in » 2xl ” odzivni modifikatorji:
< telo >
< div razred = 'h-zaslon bg-fuksija-400 sm:bg-roza-600 md:bg-zelena-700 lg:bg-vijolična-500 xl:bg-teal-600 2xl:bg-rumena-500' >
< h1 razred = 'text-7xl text-white text-center p-20' > Namig za Linux < / h1 >
< / div >
< / telo >
Tukaj:
- “ bg-fuksija-400 ” nastavi barvo ozadja za do fuksije.
- “ sm:bg-roza-600 ” razred uporabi roza barvo za ozadje za majhne zaslone.
- “ md:bg-green-700 ” spremeni barvo ozadja v zeleno na srednjih zaslonih.
- “ lg:bg-vijolična-50 ” nastavi barvo ozadja na vijolično za velike zaslone.
- “ xl:bg-teal-600 ” uporabi modrozeleno barvo za ozadje za zelo velike zaslone.
- “ 2xl:bg-rumena-500 ” spremeni barvo ozadja v rumeno na zaslonih 2xl.
2. korak: Preverite izhod
Oglejte si spletno stran HTML, da preverite, ali odzivne prekinitvene točke delujejo pravilno ali ne:
Na zgornji spletni strani je mogoče opaziti, da se barva spletne strani spreminja z velikostjo zaslona, v skladu s katero so bile določene prelomne točke.
Zaključek
Če želite uporabiti odzivne prekinitvene točke v Tailwindu, uporabite odzivne modifikatorje, kot je » sm ”, “ md ”, “ lg ”, “ xl « in » 2xl ” z drugimi razredi v programu HTML. Ti modifikatorji se uporabljajo za uporabo različnih slogov za določen element glede na velikost zaslona. Ta zapis je ponazoril metodo za uporabo odzivnih prelomnih točk v Tailwind CSS.