sm: md: lg:Mobile-firstShow/hide

Responsive Design

Breakpoint bawaan sm-md-lg-xl dan pola pikir mobile-first: dasar dulu, varian ke atas.

Mobile-first

Class tanpa varian berlaku untuk semua ukuran; varian seperti md: menambah perilaku di breakpoint ke ATAS. Karena itu tulis gaya mobile sebagai dasar, lalu naikkan: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4. Resizing layar untuk melihat demo di bawah berubah.

Mobile-first live

1 kolom

sm: 2 kolom

lg: 4 kolom

resize saya!

Layar kecil: teks basis Layar sm+: teks varian

Show / hide antar breakpoint

hidden digabung varian mengontrol visibilitas per ukuran: hidden md:block berarti sembunyi di mobile, tampil di desktop. Pola ini dipakai di navbar situs ini untuk menyingkat label di layar kecil.

Decision Rule

Tulis dari base → sm: → md: → lg:. Pikirkan dari layar terkecil, bukan sebaliknya.