Pembuat Media Query CSS
Hasilkan blok @media query CSS dari preset breakpoint (atau lebar kustom) dan jenis kondisi — membungkus aturan CSS Anda dalam blok responsif siap tempel.
Input
Tempel aturan CSS yang ingin dibungkus dalam blok @media — biarkan sebagaimana adanya untuk komentar placeholder.
Output
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-media-query-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"breakpointPreset": "tablet",
"customWidth": "320",
"conditionType": "min-width",
"cssContent": "color: red;"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-media-query-generator` tool (CSS Media Query Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-media-query-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Media Query CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa yang dilakukan
Pembuat Media Query CSS membuat blok @media (...) { } siap tempel dari lebar breakpoint dan jenis kondisi. Pilih preset perangkat umum (atau atur lebar pixel kustom), pilih apakah kueri harus berlaku di atas atau di bawah lebar tersebut — atau beralih ke pemeriksaan orientasi — dan tempel aturan CSS yang ingin dibungkus. Alat memperbarui output secara instan saat Anda mengubah opsi apa pun.
Apa itu media query CSS
Media query memungkinkan stylesheet menerapkan aturan berbeda tergantung pada lebar viewport, tinggi, orientasi, atau karakteristik lainnya. Bentuk dasarnya adalah:
@media (min-width: 768px) {
/* aturan yang hanya berlaku pada 768px dan lebih lebar */
}Media query adalah fondasi desain responsif: alih-alih mengirimkan satu tata letak tetap, Anda menulis tata letak dasar dan kemudian mengganti properti tertentu setelah viewport melampaui breakpoint.
Breakpoint umum
Tidak ada skala breakpoint resmi tunggal — kerangka kerja berbeda (Bootstrap, Tailwind, Material Design) masing-masing mendefinisikan milik mereka sendiri — tetapi skala generik yang banyak digunakan terlihat seperti ini:
- Seluler — 480px (ponsel kecil ke atas)
- Tablet — 768px (tablet dan laptop kecil)
- Laptop — 1024px (laptop dan monitor desktop kecil)
- Desktop — 1280px (monitor desktop standar ke atas)
Pilih "Kustom" jika proyek Anda menggunakan skala berbeda dari yang ini.
Cara menggunakannya
- Pilih Preset Breakpoint (Seluler, Tablet, Laptop, Desktop) atau pilih Kustom dan masukkan lebar pixel Anda sendiri.
- Pilih Jenis Kondisi:
- Min-width — mobile-first, berlaku pada breakpoint dan lebih lebar.
- Max-width — desktop-first, berlaku pada breakpoint dan lebih sempit.
- Orientasi: potret/lanskap — berlaku berdasarkan orientasi viewport alih-alih lebarnya (breakpoint diabaikan untuk ini).
- Tempel aturan CSS yang ingin dibungkus ke dalam CSS untuk dibungkus — biarkan komentar placeholder jika Anda hanya menginginkan shell
@mediakosong. - Salin atau unduh blok yang dihasilkan dari output dan tempel ke dalam stylesheet Anda.
FAQ
Apa perbedaan antara min-width dan max-width?
min-width adalah "mobile-first": Anda menulis gaya dasar untuk layar kecil, lalu menambahkan penggantian yang dimulai setelah layar setidaknya selebar breakpoint. max-width adalah "desktop-first": penggantian berlaku setelah layar paling banyak selebar breakpoint — pendekatan yang lebih tradisional sebelum mobile-first menjadi umum.
Bisakah saya menggabungkan min-width dan max-width untuk rentang?
Alat ini menghasilkan satu kondisi sekaligus. Untuk rentang (misalnya "hanya antara 768px dan 1023px"), hasilkan versi max-width pada 1023px dan versi min-width pada 768px dan gabungkan dengan tangan menggunakan and:
@media (min-width: 768px) and (max-width: 1023px) { ... }.
Mengapa bidang breakpoint tidak melakukan apa pun ketika saya memilih orientasi? Kueri orientasi merespons rasio aspek viewport, bukan lebarnya, jadi nilai breakpoint bukan bagian dari kondisi yang dihasilkan — hanya pilihan potret/lanskap yang penting.
Apakah alat ini menyimpan atau mengunggah apa pun? Tidak. Semuanya berjalan secara lokal di browser Anda — CSS yang Anda tempel tidak pernah meninggalkan perangkat Anda.