Ibibigay ng artikulong ito ang pamamaraan para sa paglalapat ng pinakamababang taas at maximum na taas sa mga breakpoint ng Tailwind at mga query sa media gamit ang sumusunod na balangkas:
- Pagtatakda ng Min-height na Property sa Tailwind Breakpoints at Media Query
- Pagtatakda ng Max-height Property sa Tailwind Breakpoints at Media Query
Paano Magtakda ng Min-height na Property sa Tailwind Breakpoint at Mga Query sa Media?
Nagbibigay ang Tailwind ng mga default na breakpoint at mga query sa media para gawing tumutugon ang disenyo para sa iba't ibang laki ng screen. Ang mga katangiang ibinigay sa mga breakpoint ay inilalapat kapag ang tinukoy na laki ng screen ay natugunan. Ang pinakamababang lapad para sa mga default na breakpoint na ito ay inilarawan bilang sumusunod:
- sm: Minimum na lapad ng '640px'.
- md: Minimum na lapad ng '768px'.
- lg: Minimum na lapad ng '1024px'.
- xl: Minimum na lapad ng '1280px'.
- 2xl: Minimum na lapad ng '1536px'.
Itinatakda ng property na min-height ang mas mababang limitasyon para sa taas ng isang elemento. Nangangahulugan ito na tinutukoy nito ang pinakamababang taas na pinapayagang taglayin ng isang elemento. Upang gamitin ang min-height na property na may mga breakpoint sa Tailwind, ginagamit ang sumusunod na syntax:
< div klase = '{breakpoint prefix}:min-h-{value}...' > < / div >
Gamitin natin ang natukoy na syntax sa itaas sa isang demonstrasyon para mas maunawaan. Sa halimbawang ito, ang pinakamababang limitasyon sa taas para sa elemento ay tataas sa ' md ” breakpoint. Magreresulta ito sa pagtaas ng kabuuang taas ng elemento.
< div klase = 'h-48 w-48 rounded-md bg-green-500 text-center md:min-h-screen' > Taasan ang Screen Sukat para Taasan ang pinakamababang taas< / div >
Ang paliwanag para sa code sa itaas ay ang mga sumusunod:
- Ang ' h-48 Ang klase ng ” ay nagbibigay ng taas na 192px sa elemento ng div.
- Ang ' w-48 Ang klase ng ” ay nagbibigay ng taas na 192px sa elemento ng div.
- Ang ' bilugan-md Ang klase ay nagbibigay ng bilog na sulok sa elemento ng div.
- Ang ' bg-{color}-{number} ” Ang klase ay nagbibigay ng tinukoy na kulay sa background ng elemento ng div.
- Ang ' text-center ” ipinoposisyon ng klase ang elemento ng teksto sa gitna ng elemento ng div.
- Ang ' md:min-h-screen ” tataas ng klase ang minimum na limitasyon sa taas na katumbas ng 100% taas ng screen.
Output:
Makikita sa output, na kapag ang ' md ” Natugunan ang laki ng screen, makukuha ng elemento ang 100% ng taas ng screen. Nangyayari ito dahil ang pinakamababang limitasyon sa taas para sa ' md ” ang breakpoint ay itinakda katumbas ng taas ng screen:
Paano Magtakda ng Max-height Property sa Tailwind Breakpoint at Mga Query sa Media?
Itinatakda ng klase ng maximum na taas ang pinakamataas na limitasyon para sa property ng taas sa Tailwind. Nangangahulugan ito na tinutukoy nito ang pinakamataas na taas na maaaring taglayin ng isang elemento. Ang syntax para sa paggamit ng pinakamababang klase ng taas na may mga breakpoint ay ang mga sumusunod:
< div klase = '{breakpoint prefix}:max-h-{size}...' > < / div >Gamitin natin ang natukoy na syntax sa itaas sa isang demonstrasyon para mas maunawaan. Sa halimbawang ito, ang elemento ay bibigyan ng isang partikular na maximum na limitasyon sa taas para sa ' md ” breakpoint. Paliitin nito ang default na taas na ibinigay sa elemento.
< div klase = 'h-96 w-48 rounded-md bg-green-500 text-center md:max-h-60' > Taasan ang Screen Sukat para Taasan ang pinakamababang taas< / div >Tandaan na sa code sa itaas, ang default na taas ng isang elemento ay binibigyan ng 'h-96' ibig sabihin, 384px. Gayunpaman, lumiliit ang taas na ito sa '240px' kapag natugunan ang 'md' breakpoint. Ito ay dahil sa ' md:max-h-60 ” klase.
Output:
Sa ibabang output, malinaw na makikita na kapag ang laki ng screen ay umabot sa ' md ” breakpoint, lumiliit ang taas ng elemento ng elemento.
Iyon ay tungkol sa pagtatakda ng minimum at maximum na taas na property gamit ang mga breakpoint ng Tailwind.
Konklusyon
Upang itakda ang pinakamataas na taas na katangian sa mga breakpoint ng Tailwind at mga query sa media, ang ' {breakpoint prefix}:max-h-{size} ” klase ang ginagamit. Katulad nito, upang itakda ang pinakamababang taas na katangian sa mga breakpoint ng Tailwind, ang ' {breakpoint prefix}:min-h-{size} ” klase ang ginagamit. Ang artikulong ito ay nagbigay ng pamamaraan para sa paglalapat ng min at max-height na mga katangian sa mga breakpoint at media query sa Tailwind.