Pembuat Media Query

• Pembuatan media query seketika: buat dan pratinjau media query CSS responsif secara real time. Pembuat media query kami menghasilkan aturan @media persis saat Anda mengatur setiap breakpoint - tanpa menunggu, tanpa perjalanan ke server, dan tanpa menebak-nebak.
• Pembuat media query online yang aman: semua pembuatan media query terjadi secara lokal di browser Anda. Kode CSS dan konfigurasi breakpoint Anda tidak pernah meninggalkan perangkat, sehingga privasi 100% terjaga setiap kali Anda memakai pembuat media query online kami.
• Pembuat media query online tanpa instalasi: pakai pembuat media query kami langsung di browser apa pun, tanpa unduhan, plugin, atau perangkat lunak. Buat breakpoint responsif untuk proyek apa pun dari perangkat apa pun, di mana saja, sepenuhnya gratis.
• Banyak opsi breakpoint: atur min-width, max-width, rentang (min + maks), min-height, max-height, orientasi, atau kondisi yang sepenuhnya khusus. Pilih satuan px, em, atau rem. Muat preset Bootstrap 5, Tailwind CSS, atau mobile-first dengan satu klik.

• Desain web responsif: pakai pembuat media query kami untuk menentukan breakpoint bagi layout ponsel, tablet, dan desktop. Hasilkan aturan min-width dan max-width yang menyesuaikan layout, tipografi, dan jarak Anda ke ukuran layar apa pun tanpa menulis satu baris CSS pun secara manual.
• Pengaturan breakpoint framework: muat preset Bootstrap 5 atau Tailwind CSS dengan satu klik untuk menghasilkan breakpoint persis yang dipakai framework tersebut. Sesuaikan nilainya agar cocok dengan design system Anda dan salin CSS-nya langsung ke proyek.
• Pengembangan mobile-first: buat stylesheet mobile-first dengan menghasilkan media query min-width yang meningkatkan layout secara bertahap seiring bertambahnya viewport. Pembuat media query kami memudahkan Anda memvisualisasikan rentang breakpoint pada penggaris sebelum menulis kode.
• Penargetan tablet dan orientasi: targetkan orientasi perangkat tertentu dengan media query potret dan lanskap. Gunakan jenis kueri rentang untuk mengisolasi viewport seukuran tablet di antara dua breakpoint, memastikan gaya hanya berlaku pada kelas perangkat yang dimaksud.
• Pembuatan stylesheet cetak: ubah jenis media ke "print" untuk menghasilkan media query khusus cetak. Kendalikan gaya yang berlaku saat pengguna mencetak halaman - sembunyikan navigasi, sesuaikan ukuran font, dan hapus latar belakang agar hasil cetakan bersih.
• Dokumentasi design system: dokumentasikan breakpoint design system Anda dengan menghasilkan berkas CSS lengkap berisi breakpoint bernama dan komentar. Unduh berkas .css dan bagikan ke tim Anda sebagai acuan perilaku responsif yang konsisten di semua komponen.

Media query CSS adalah aturan bersyarat yang menerapkan gaya hanya ketika browser atau perangkat memenuhi kondisi tertentu - seperti lebar viewport minimum, tinggi layar maksimum, atau orientasi perangkat. Sintaksnya adalah @media screen and (min-width: 768px) { }. Media query adalah fondasi desain web responsif, memungkinkan satu stylesheet menyesuaikan layout, tipografi, dan jarak ke ukuran layar apa pun. Pembuat media query kami menghasilkan aturan ini secara visual sehingga Anda bisa mengatur breakpoint tanpa menghafal sintaksnya.

1. Tambahkan breakpoint Anda: klik "Tambah Breakpoint" atau muat preset (Bootstrap 5, Tailwind CSS, Mobile First) untuk mengisi sekumpulan breakpoint bernama. Setiap breakpoint punya panel konfigurasinya sendiri.
2. Atur setiap breakpoint: pilih jenis media (screen, print, all), jenis kueri (min-width, max-width, rentang, tinggi, orientasi, atau khusus), masukkan nilai Anda, dan pilih satuannya (px, em, rem). Kueri yang dihasilkan diperbarui langsung saat Anda mengetik.
3. Salin atau unduh CSS: pembuat media query menghasilkan CSS lengkap untuk semua breakpoint. Salin kueri satu per satu atau unduh seluruh stylesheet sebagai berkas .css.

• Kueri min-width: menerapkan gaya dari lebar viewport minimum ke atas - pendekatan standar desain responsif mobile-first.
• Kueri max-width: menerapkan gaya sampai lebar viewport maksimum - dipakai pada pendekatan desktop-first untuk menimpa gaya di layar lebih kecil.
• Kueri rentang (min + maks): menggabungkan min-width dan max-width untuk menargetkan rentang viewport tertentu, seperti gaya khusus tablet antara 768px dan 1023px.
• Kueri orientasi: menargetkan orientasi potret atau lanskap secara independen dari ukuran viewport - berguna untuk penyesuaian layout tablet.

Satuan yang Anda pilih untuk breakpoint media query memengaruhi bagaimana breakpoint tersebut merespons preferensi pengguna. Breakpoint px bersifat absolut dan tidak berskala dengan pengaturan ukuran font browser. Breakpoint em relatif terhadap ukuran font dasar browser (biasanya 16px), jadi 48em sama dengan 768px pada ukuran bawaan tetapi berskala jika pengguna mengubah ukuran font browser. rem bersikap identik dengan em pada media query (keduanya mengacu pada bawaan browser, bukan elemen akar). Banyak pengembang yang berfokus pada aksesibilitas lebih memilih breakpoint em atau rem karena menghormati preferensi ukuran font pengguna, memastikan layout menata ulang dengan benar bagi pengguna yang memperbesar ukuran font bawaan mereka.