toolsmoah

Generator Kueri Media Viewport

Hasilkan kueri media CSS untuk desain web responsif.

Pengaturan Kueri Media
Konfigurasikan kondisi kueri media

Kondisi 1

Preset
Pilih pola kueri media yang umum digunakan
CSS yang Dihasilkan
@media screen and (max-width: 768px) {
  /* Your CSS rules here */
}
Breakpoint Umum
Seluler:max-width: 480px
Tablet:481px - 768px
Desktop:min-width: 1024px
Desktop Besar:min-width: 1200px
Panduan Kueri Media

Fitur Media Utama

  • • lebar/tinggi: Lebar/tinggi viewport
  • • lebar-min/lebar-maks: Kondisi lebar minimum/maksimum
  • • orientasi: Orientasi layar (potret/lanskap)
  • • resolusi: Resolusi layar (layar retina, dll.)
  • • hover: Dukungan kemampuan hover
  • • pointer: Presisi penunjuk (sentuh/mouse)

Kiat Penggunaan

  • • Pendekatan Mobile First: Gunakan lebar-min untuk mendesain dari layar kecil
  • • Gabungkan kondisi kompleks dengan operator logis
  • • Gunakan jenis media cetak untuk gaya cetak terpisah
  • • Gunakan resolusi untuk dukungan tampilan resolusi tinggi
    Generator Kueri Media Viewport