See artikkel kirjeldab Tailwind CSS-i rearuudustiku murdepunktide ja meediumipäringute rakendamise meetodit.
Kuidas Tailwindis ridaruudustikule murdepunkte ja meediapäringuid rakendada?
Katkestuspunktide ja meediumipäringute rakendamiseks Tailwindi rearuudustikus looge HTML-programm. Seejärel määrake ridade arv erinevate ekraanisuuruste jaoks, kasutades ' sm ”, „ md ” või „ lg ' murdepunktid koos ' grid-rows-
Uurime praktilist rakendamist:
1. samm: kasutage katkestuspunkte ja meediumipäringuid rearuudustikuga HTML-programmis
Looge HTML-programm ja määrake erinevate ekraanisuuruste jaoks ridade arv nupuga ' grid-rows-
< keha >
< div klass = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div klass = 'bg-teal-500 p-5' > 1 < / div >
< div klass = 'bg-teal-500 p-5' > 2 < / div >
< div klass = 'bg-teal-500 p-5' > 3 < / div >
< div klass = 'bg-teal-500 p-5' > 4 < / div >
< div klass = 'bg-teal-500 p-5' > 5 < / div >
< div klass = 'bg-teal-500 p-5' > 6 < / div >
< div klass = 'bg-teal-500 p-5' > 7 < / div >
< div klass = 'bg-teal-500 p-5' > 8 < / div >
< div klass = 'bg-teal-500 p-5' > 9 < / div >
< div klass = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / keha >
Siin:
- “ võre ” klassi kasutatakse ruudustikupaigutuse loomiseks.
- “ ruudustik-read-2 ” klass täpsustab, et ruudustikus peaks olema 2 võrdse suurusega rida.
- “ md:grid-rows-3 ” klass muudab ruudustiku keskmise suurusega ekraanil kolmeks võrdseks reaks.
- “ lg:grid-rows-5 ” klass muudab ruudustiku suurel ekraanil 5 võrdse suurusega reaks.
- “ grid-flow-col ” klass paigutab ruudustiku üksused horisontaalselt veergudesse.
- “ vahe-3 ” klass määrab iga ruudustiku elemendi vahele 3 ühikut.
- “ m-3 ” klass rakendab võrgukonteineri ümber 3 ühiku suurust varu.
- “ tekstikeskus ” klass seab iga ruudustiku elemendi teksti keskele.
- “ bg-teal-500 ” klass määrab sinakaspruuni värvi ruudustikuelementide taustale.
- “ p-5 ” klass lisab lapse sees olevale sisule 5-ühikulise polsterduse
esemed.
2. samm: kontrollige väljundit
Katkestuspunktide ja meediumipäringute rearuudustikule rakendamise tagamiseks vaadake HTML-i veebilehte, muutes ekraani suurust:
Ülaltoodud väljundis on näha, et ridade arv muutub koos ekraani suurusega. See näitab, et katkestuspunktid ja meediumipäringud on rearuudustikule edukalt rakendatud.
Järeldus
Katkestuspunktide ja meediumipäringute rakendamiseks Tailwindi reavõrgustikule määrake ridade arv erinevate ekraanisuuruste jaoks, kasutades ' sm ”, „ md ” või „ lg ' murdepunktid koos ' grid-rows-
” kommunaalteenused. Seejärel veenduge veebilehel muudatused, muutes ekraani suurust. See artikkel on näide meetodi kohta, kuidas rakendada Tailwind CSS-i rearuudustikus katkestuspunkte ja meediumipäringuid.