ตัวสร้าง CSS Media Query

ตัวสร้าง CSS media query ฟรี สร้าง breakpoint แบบ responsive สำหรับ Tailwind, Bootstrap หรือความกว้างแบบกำหนดเอง ทั้ง min-width และ max-width พร้อมเงื่อนไข

Loading tool...

ตัวสร้าง CSS Media Query คืออะไร?

ตัวสร้าง CSS Media Query สร้าง rule @media แบบ responsive จาก breakpoint ของ Tailwind, Bootstrap หรือแบบกำหนดเอง เลือกทิศทาง mobile-first หรือ desktop-first ผนวกเงื่อนไข hover, pointer, color-scheme และ reduced-motion และพรีวิว query ที่ตรงเงื่อนไขที่ความกว้าง viewport ใดๆ

ประโยชน์หลัก

ค่า breakpoint ตรงตาม Tailwind และ Bootstrap
รองรับ mobile-first และ desktop-first
range query ด้วย min และ max width
viewport simulator แบบสด
CSS ที่ format พร้อมคัดลอก

กรณีการใช้งาน

•layout แบบ responsive
•ปรับ typography ต่อ breakpoint
•จัดสไตล์ dark mode
•animation ที่คำนึงถึง accessibility
•ทำ CSS เองให้เข้ากับ grid ของ framework

วิธีใช้ตัวสร้าง CSS Media Query

เลือกชุด breakpoint: เลือก Tailwind, Bootstrap หรือแบบกำหนดเอง แล้วกดเลือก breakpoint ที่ต้องการ
เลือกทิศทาง: ใช้ min-width สำหรับ mobile-first หรือ max-width สำหรับ desktop-first
เพิ่มเงื่อนไข (ถ้าต้องการ): ผนวกเงื่อนไข hover, pointer, prefers-color-scheme หรือ prefers-reduced-motion
พรีวิวและคัดลอก: ลาก slider ตรวจสอบ query ที่ทำงาน แล้วคัดลอก CSS ไปใช้งาน

คุณสมบัติหลัก

preset ของ Tailwind, Bootstrap และแบบกำหนดเอง
ทิศทาง min-width (mobile-first) และ max-width (desktop-first)
เงื่อนไขเสริม hover, pointer, prefers-color-scheme และ reduced-motion
viewport simulator ตั้งแต่ 320px ถึง 1920px
CSS ที่ format พร้อมคัดลอกโดยใช้ selector ของคุณ
ทำงาน 100% ฝั่ง client ไม่ส่งข้อมูลไปเซิร์ฟเวอร์

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

CSS media query คืออะไร?

media query คือ at-rule ของ CSS ที่ apply style เฉพาะเมื่อ viewport หรืออุปกรณ์ตรงเงื่อนไข เช่น min-width, max-width หรือ prefers-color-scheme

breakpoint ของ Tailwind มีค่าอะไรบ้าง?

Tailwind CSS v3/v4 ใช้ sm 640px, md 768px, lg 1024px, xl 1280px และ 2xl 1536px เครื่องมือนี้ใช้ค่าตรงตามนี้

breakpoint ของ Bootstrap มีค่าอะไรบ้าง?

Bootstrap 5 ใช้ sm 576px, md 768px, lg 992px, xl 1200px และ xxl 1400px

ควรใช้ min-width หรือ max-width?

แนะนำ min-width (mobile-first) คือเขียน style พื้นฐานสำหรับจอเล็กก่อนแล้วค่อยเพิ่มเมื่อ viewport กว้างขึ้น ส่วน max-width (desktop-first) เหมาะเมื่อดัดแปลงเว็บเดิมที่ออกแบบสำหรับ desktop

คู่มือฉบับละเอียด

CSS Media Query Generator: สร้าง Breakpoint สำหรับ Responsive แบบเสร็จในไม่กี่วินาที

อ่านคู่มือฉบับเต็ม →

ตัวสร้าง CSS Media Query

ตั้งค่า

ชุด Breakpoint

Breakpoints

ทิศทาง query

เงื่อนไขเพิ่มเติม

CSS selector

พรีวิวสด

Active: lg

ความกว้าง viewport จำลอง1024px

sm · 640pxmd · 768pxlg · 1024px

Responsive content adapts to the viewport width

ลาก slider เพื่อดูว่า media query ตัวไหนตรงเงื่อนไข กล่อง demo จะปรับขนาดตาม breakpoint ที่ active

CSS ที่สร้าง

/* sm */
@media (min-width: 640px) {
  .element {
    /* your styles */
  }
}

/* md */
@media (min-width: 768px) {
  .element {
    /* your styles */
  }
}

/* lg */
@media (min-width: 1024px) {
  .element {
    /* your styles */
  }
}

นำไปวางใน stylesheet แล้วแทนที่ comment ตัวอย่างในแต่ละ rule

เกี่ยวกับตัวสร้าง CSS Media Query

media query คือกลไกของ CSS ที่จะ apply style เฉพาะเมื่อ viewport หรืออุปกรณ์ตรงเงื่อนไข เช่น min-width หรือ max-width เครื่องมือนี้สร้าง breakpoint ตาม preset ของ Tailwind CSS และ Bootstrap รวมถึงความกว้างแบบกำหนดเอง รองรับทั้งทิศทาง mobile-first (min-width) และ desktop-first (max-width) ผนวกเงื่อนไข hover, pointer, color-scheme และ reduced-motion ได้ พร้อม viewport simulator ให้เห็นว่า query ตัวไหนทำงานที่ความกว้างแต่ละระดับ

ทำไมต้องใช้ตัวสร้างนี้?

• query แบบ min-width (mobile-first) คือแนวทางสมัยใหม่ที่แนะนำ cascade จากจอเล็กไปใหญ่อย่างเป็นระเบียบ
• preset ของ Tailwind และ Bootstrap ใช้ค่า pixel ตรงตาม framework จริง CSS จึงเข้ากับ utility class ได้พอดี
• range query ที่มีทั้ง min และ max เจาะจง breakpoint เดียวโดยไม่รั่วไหลไปขนาดอื่น
• เงื่อนไขอย่าง prefers-color-scheme และ prefers-reduced-motion ช่วยปรับ UI ตามความต้องการและการเข้าถึงของผู้ใช้
• viewport simulator แสดง query ที่ตรงเงื่อนไขที่ความกว้างใดๆ ก่อนเขียน CSS จริง

คุณสมบัติเด่น

• ชุด breakpoint ของ Tailwind (sm ถึง 2xl), Bootstrap (sm ถึง xxl) และแบบกำหนดเอง
• ทิศทาง query แบบ min-width (mobile-first) และ max-width (desktop-first)
• เงื่อนไขเสริม hover, pointer, prefers-color-scheme และ prefers-reduced-motion
• viewport simulator ตั้งแต่ 320px ถึง 1920px พร้อมไฮไลต์ query ที่ active
• CSS ที่ format พร้อมคัดลอกโดยใช้ selector ของคุณเอง

Loading tool...