dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
TW Toate comenzile Tailwind CSS

Container Queries în Tailwind CSS: Clasele @container și Modificatorii @sm / @md / @lg în Tailwind CSS

Design Responsiv Modern Tailwind CSS v4 Q&A / Distribuie cod

Ghid complet pentru Container Queries în Tailwind CSS: declararea containerelor cu @container și adaptarea stilurilor componentelor în funcție de dimensiunea părintelui (@sm:*, @md:*).

Sintaxă 
<div class="@container"><div class="flex @sm:flex-row @sm:gap-4">

Tradițional, media queries (sm:, md:, lg:) reacționează exclusiv la lățimea întregii ferestre a browserului (viewport). Container Queries permit unei componente să își modifice aspectul pe baza dimensiunii containerului părinte în care este montată, făcând componenta 100% reutilizabilă atât într-un sidebar îngust, cât și pe un ecran ultra-lat.

Construirea unui card adaptabil la container
<!-- Părintele este marcat ca și container: -->
<div class="@container p-4 bg-white rounded-xl shadow">
    <div class="flex flex-col @sm:flex-row @sm:items-center @lg:gap-8">
        <img 
            src="avatar.jpg" 
            class="w-full @sm:w-24 @lg:w-32 rounded-lg" 
            alt="Profil" 
        />
        <div class="mt-4 @sm:mt-0 @sm:ml-4">
            <h4 class="text-base @sm:text-lg @lg:text-2xl font-bold">Card Inteligent</h4>
            <p class="text-sm text-gray-500 @sm:line-clamp-2">
                Acest card își schimbă orientarea din vertical în orizontal imediat 
                ce containerul său depășește 384px, indiferent de lățimea ecranului!
            </p>
        </div>
    </div>
</div>
Comunitate & Schimb de cunoștințe

Întrebări & Exemple de Cod: Container Queries în Tailwind CSS: Clasele @container și Modificatorii @sm / @md / @lg

Ai o nelămurire despre utilizarea comenzii Container Queries în Tailwind CSS: Clasele @container și Modificatorii @sm / @md / @lg sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!

💬

Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!

Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.

Comunitate Adaugă o întrebare sau distribuie un cod

Moderare & Siguranță:

Pentru a menține calitatea și securitatea informațiilor, fiecare întrebare sau fragment de cod/prompt este analizat (manual sau prin moderare asistată de AI) înainte de publicare.