Pembuat Kueri Media Buat kueri media CSS dengan kondisi fitur dan titik putus yang sudah ditentukan sebelumnya.

🎨

Pembuat Kueri Media

Buat kueri media CSS dengan kondisi fitur dan titik putus yang sudah ditentukan sebelumnya.

Gunakan preset atau buat kustom

Pilih preset umum atau tambahkan kondisi kustom dengan fitur media.

Konfigurasi kondisi

Atur jenis media, kondisi fitur, dan gabungkan dengan operator AND atau OR.

Salin query

Salin query media yang dihasilkan siap digunakan dalam stylesheet Anda.

Loading tool...

What Is Pembuat Kueri Media?

Generator Query Media membantu Anda membangun query media CSS untuk desain responsif dan deteksi fitur. Query media menerapkan aturan CSS secara kondisional berdasarkan karakteristik perangkat seperti lebar viewport, tinggi, orientasi, preferensi skema warna, dan lain-lain. Alat ini menyediakan query yang sudah ditentukan untuk kasus penggunaan umum (ponsel, tablet, desktop, mode gelap, cetak, gerakan berkurang) dan pembuat kustom untuk membuat kondisi kompleks. Anda dapat menyetel jenis media (layar, cetak, semua), menambahkan beberapa kondisi fitur, dan memilih bagaimana menggabungkannya (AND atau OR). Query yang dihasilkan termasuk sintaksis yang tepat dengan aturan @media dan kurung, siap untuk ditempel ke dalam CSS Anda.

Why Use Pembuat Kueri Media?

Preset umum untuk mobile, tablet, desktop, mode gelap, dan lain-lain
Dukungan untuk semua fitur media CSS termasuk yang modern
Operator AND/OR untuk menggabungkan beberapa kondisi
Tabel referensi titik putus umum untuk pencarian cepat

Common Use Cases

Layout Responsif

Buat gaya berbasis titik putus untuk ukuran layar yang berbeda.

Dukungan Mode Gelap

Hasilkan query prefers-color-scheme untuk gaya mode gelap.

Stylesheet Cetak

Buat query @media print untuk gaya yang dioptimalkan untuk cetak.

Fitur Aksesibilitas

Target preferensi gerakan dan kontras yang dikurangi untuk desain yang dapat diakses.

Technical Guide

Query media CSS menggunakan aturan @media untuk menerapkan gaya secara kondisional. Sintaksisnya adalah @media [type] dan (kondisi) { aturan }. Jenis media termasuk layar, cetak, dan semua. Fitur media menguji kemampuan perangkat: min-width/max-width untuk titik breakpoint responsif, orientasi untuk lanskap/potret, prefers-color-scheme untuk mode gelap/terang, prefers-reduced-motion untuk sensitivitas animasi, hover untuk kemampuan hover, dan pointer untuk presisi input. Kondisi multiple digabungkan dengan kata kunci and untuk semua kondisi, atau dipisahkan dengan koma untuk kondisi apa pun. Kata kunci not menyangkal query. Fitur modern seperti prefers-color-scheme dan prefers-reduced-motion memungkinkan peningkatan progresif untuk preferensi pengguna. Untuk pendekatan mobile-first, gunakan query min-width. Untuk desktop-first, gunakan query max-width. Menggabungkan keduanya menciptakan query rentang seperti @media (min-width: 768px) dan (max-width: 1023px).

Tips & Best Practices

1
Gunakan pendekatan mobile-first dengan query min-width untuk kinerja yang lebih baik
2
Selalu sertakan prefers-reduced-motion untuk aksesibilitas
3
Uji prefers-color-scheme untuk dukungan mode gelap otomatis
4
Gunakan query rentang (min dan max) untuk menargetkan kategori perangkat tertentu

Related Tools

Tanah Main CSS Flexbox

Penggalang CSS Flexbox visual dengan kontrol interaktif untuk semua properti wadah fleksibel.

🎨 CSS & Design

Papan Kerja CSS Grid

Pembangun CSS Grid visual dengan kontrol interaktif untuk kolom templat, baris, dan celah.

🎨 CSS & Design

Pengujian Desain Responsif

Pratinjau situs web pada titik breakpoint perangkat yang umum dengan viewer iframe bawaan.

🎨 CSS & Design

Pembuat Lembar Gaya Cetak

Buat lembar gaya @media cetak dengan opsi untuk menyembunyikan elemen, mengatur gaya teks, dan mengontrol pemutusan halaman.

🎨 CSS & Design

Frequently Asked Questions

Q Apakah saya harus menggunakan min-width atau max-width?

min-width mengikuti pendekatan mobile-first (direkomendasikan). max-width mengikuti pendekatan desktop-first. Pilih berdasarkan pendekatan desain Anda.

Q Titik putus apa yang harus saya gunakan?

Titik putus umum: 640px (mobile), 768px (tablet), 1024px (laptop), 1280px (desktop), 1536px (desktop besar).

Q Dapatkah saya menggabungkan beberapa kondisi?

Ya, gunakan and untuk memerlukan semua kondisi, atau koma untuk mencocokkan kondisi apa pun.

Q Apa itu prefers-color-scheme?

Ini mendeteksi apakah pengguna telah mengatur OS mereka ke mode gelap atau terang, memungkinkan peralihan tema otomatis.

Q Bagaimana saya dapat mendukung gerakan yang dikurangi?

Gunakan @media (prefers-reduced-motion: reduce) untuk menonaktifkan atau mengurangi animasi untuk pengguna yang sensitif.

About This Tool

Pembuat Kueri Media is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.