UTILS.
เป็นส่วนตัวตั้งแต่เริ่ม
@

เครื่องมือสร้าง CSS Media Query

สร้าง @media query แบบ responsive พร้อมค่าสำเร็จรูปแล้วคัดลอก

ไฟล์ของคุณอยู่ในอุปกรณ์นี้

ไฟล์ประมวลผลในเบราว์เซอร์และไม่ถูกอัปโหลด เว็บไซต์จะดาวน์โหลดโค้ดและทรัพยากรที่จำเป็นต่อเครื่องมือ ไม่ต้องมีบัญชีและไม่มีตัวติดตาม

ใช้ปุ่มดาวน์โหลดเพื่อบันทึกเครื่องมือนี้เป็นไฟล์ HTML ไฟล์เดียวสำหรับใช้ออฟไลน์

ความเป็นส่วนตัว →

เกี่ยวกับเครื่องมือนี้

สร้าง @media query แบบ responsive โดยเลือก min-width, max-width หรือช่วง พร้อม orientation และค่าสำเร็จรูปของอุปกรณ์แบบคลิกเดียว แล้วคัดลอกตัวครอบ ทั้งหมดทำงานในเบราว์เซอร์ของคุณ

คำถามที่พบบ่อย

ความแตกต่างระหว่าง min-width กับ max-width คืออะไร?
min-width ใช้สไตล์ที่ความกว้างนั้นขึ้นไป (mobile-first) ส่วน max-width ใช้สไตล์ที่ความกว้างนั้นลงไป
ค่าสำเร็จรูปของอุปกรณ์ทำงานอย่างไร?
แต่ละค่าสำเร็จรูปจะเติม breakpoint ทั่วไป — มือถือไม่เกิน 767px, แท็บเล็ต 768–1023px และเดสก์ท็อปตั้งแต่ 1024px — ซึ่งคุณปรับละเอียดเพิ่มได้

เครื่องมือเพิ่มเติม