Šis raksts ilustrēs metodi reaģējošo pārtraukumpunktu izmantošanai Tailwind CSS.
Kā Tailwind izmantot atsaucīgos pārtraukuma punktus?
Lai programmā Tailwind izmantotu adaptīvos pārtraukumpunktus, izmantojiet adaptīvos modifikatorus, piemēram, “ sm ”, “ md ”, “ lg ”, “ xl ' un ' 2xl ” ar citām klasēm programmā HTML. Pēc tam skatiet HTML tīmekļa lapu un mainiet ekrāna izmēru, lai pārliecinātos, ka pārtraukuma punkti darbojas pareizi.
1. darbība. HTML programmā izmantojiet adaptīvos modifikatorus
Izveidojiet HTML programmu un izmantojiet responsīvos modifikatorus ar vēlamo stilu. Piemēram, mēs esam izmantojuši ' sm ”, “ md ”, “ lg ”, “ xl ' un ' 2xl ” atsaucīgie modifikatori:
< ķermenis >
< div klasē = 'h-screen bg-fuchsia-400 sm:bg-pink-600 md:bg-green-700 lg:bg-purple-500 xl:bg-teal-600 2xl:bg-yellow-500' >
< h1 klasē = 'text-7xl text-white text-center p-20' > Linux padoms < / h1 >
< / div >
< / ķermenis >
Šeit:
- ' bg-fuksija-400 ” klase iestata fona krāsu uz fuksiju.
- ' sm: bg-rozā-600 ” klase maziem ekrāniem fonam piemēro rozā krāsu.
- ' md:bg-green-700 ” klase maina fona krāsu uz zaļu uz vidējiem ekrāniem.
- ' lg:bg-purple-50 ” klase iestata fona krāsu uz purpursarkanu lieliem ekrāniem.
- ' xl:bg-teal-600 ” klase īpaši lielu ekrānu fonam piemēro zilganzaļo krāsu.
- ' 2xl: bg-dzeltens-500 ” klase maina fona krāsu uz dzeltenu uz 2xl ekrāniem.
2. darbība: pārbaudiet izvadi
Skatiet HTML tīmekļa lapu, lai pārbaudītu, vai adaptīvie pārtraukuma punkti darbojas pareizi.
Iepriekš minētajā tīmekļa lapā var novērot, ka tīmekļa lapas krāsa mainās līdz ar ekrāna izmēru, pēc kura tika norādīti pārtraukuma punkti.
Secinājums
Lai programmā Tailwind izmantotu adaptīvos pārtraukumpunktus, izmantojiet adaptīvos modifikatorus, piemēram, “ sm ”, “ md ”, “ lg ”, “ xl ' un ' 2xl ” ar citām klasēm programmā HTML. Šie modifikatori tiek izmantoti, lai konkrētam elementam piemērotu dažādus stilus, pamatojoties uz ekrāna izmēru. Šis raksts ir piemērs tam, kā izmantot Tailwind CSS adaptīvo pārtraukumpunktu metodi.