Generator Kueri CSS

Generator Kueri CSS

Buat CSS yang akurat @media aturan untuk setiap titik putus dan kombinasi fitur tanpa menghafal sintaks. Pilih preset rangkaian, pilih jenis pertanyaan, dan aktifkan fitur media tambahan yang Anda butuhkan — alat ini menyusun blok yang valid dengan sintaks klasik dan modern range.

Cara Penggunaan

1. Pilih sebuah Preset Rangkaian — Bootstrap 5, Tailwind CSS, Material Design, atau Custom — lalu pilih lebar titik putus.
2. Pilih Jenis Pertanyaan: lebar minimum (mobile-first), lebar maksimum (desktop-first), atau rentang antara dua lebar.
3. Pilih Gaya Sintaksis: klasik min-width / max-width atau sintaks rentang Media Queries Level 4 baru (width >= ...).
4. Aktifkan apa saja Fitur tambahan yang Anda inginkan yang digabungkan dengan titik putus: orientasi, prefers-color-scheme, prefers-reduced-motion, hover, atau pointer.
5. Salin yang dihasilkan @media ambil blok dari panel output dan letakkan di dalam stylesheet Anda.

Fitur

• Preset Framework – Titik putus satu klik untuk Bootstrap 5, Tailwind CSS, dan Material Design, ditambah mode kustom untuk nilai piksel apa pun.
• Tiga mode pertanyaan – Buat mobile-first min-width, desktop-first max-width, atau pertanyaan rentang yang tepat yang menargetkan kelas perangkat tunggal.
• Sintaks klasik dan modern – Beralih antara aturan tradisional min-width/max-width dan sintaks rentang Media Queries Level 4 yang lebih bersih (width >= X).
• Fitur Media yang Dikombinasikan – Letakkan orientasi, prefers-color-scheme, prefers-reduced-motion, kemampuan hover, dan akurasi pointer di atas setiap pertanyaan lebar.
• Pembaruan langsung – Output diperbarui saat Anda mengubah input, sehingga Anda dapat melihat kombinasi berbeda secara langsung.
• Salin & unduh – Ambil CSS dengan satu klik atau simpan sebagai .css file untuk proyek Anda.