หมวดหมู่เครื่องมือ

หน้าแรก

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

สร้าง CSS media queries สำหรับการออกแบบเว็บที่ตอบสนอง

การตั้งค่า Media Query

กำหนดค่าเงื่อนไข media query

เงื่อนไข 1

ประเภทสื่อ

คุณสมบัติสื่อ

ค่า

หน่วย

ค่าที่ตั้งไว้ล่วงหน้า

เลือกรูปแบบ media query ที่ใช้บ่อย

CSS ที่สร้างขึ้น

@media screen and (max-width: 768px) {
  /* Your CSS rules here */
}

จุดแบ่งทั่วไป

มือถือ:max-width: 480px

แท็บเล็ต:481px - 768px

เดสก์ท็อป:min-width: 1024px

เดสก์ท็อปขนาดใหญ่:min-width: 1200px

คู่มือ Media Query

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

• width/height: ความกว้าง/ความสูงของวิวพอร์ต
• min-width/max-width: เงื่อนไขความกว้างขั้นต่ำ/สูงสุด
• orientation: การวางแนวหน้าจอ (แนวตั้ง/แนวนอน)
• resolution: ความละเอียดหน้าจอ (จอแสดงผลเรตินา ฯลฯ)
• hover: การรองรับความสามารถในการโฮเวอร์
• pointer: ความแม่นยำของตัวชี้ (สัมผัส/เมาส์)

เคล็ดลับการใช้งาน

• แนวทาง Mobile First: ใช้ min-width เพื่อออกแบบจากหน้าจอขนาดเล็ก
• รวมเงื่อนไขที่ซับซ้อนด้วยตัวดำเนินการเชิงตรรกะ
• ใช้ประเภทสื่อสิ่งพิมพ์สำหรับสไตล์การพิมพ์แยกต่างหาก
• ใช้ความละเอียดสำหรับการรองรับการแสดงผลความละเอียดสูง