Media Queries

ใน Figma คุณมี Artboard แยกกันสำหรับ Desktop, Tablet และ Mobile คุณตัดสินใจว่า Layer ไหนมองเห็น Font ไหนใหญ่กว่า Column ไหนยุบ Media Query คือวิธีที่คุณแสดง Logic นั้นเป็นโค้ด CSS — “ใช้ กฎเหล่านี้ เมื่อหน้าจอกว้าง เท่านี้”

Syntax

@media (max-width: 480px) {
  /* กฎใน Block นี้จะใช้เฉพาะเมื่อ Viewport กว้าง 480 px หรือแควกว่า */
}

@media (min-width: 480px) {
  /* กฎใน Block นี้จะใช้เฉพาะเมื่อ Viewport กว้าง 480 px หรือกว้างกว่า */
}

คิดว่าเป็นประโยค if สำหรับ CSS:

max-width = “ถ้าหน้าจอกว้าง ไม่เกิน นี้ ให้ทำ…” (ใหญ่ → เล็ก)
min-width = “ถ้าหน้าจอกว้าง อย่างน้อย นี้ ให้ทำ…” (เล็ก → ใหญ่)

ตัวอย่างจริง — Card ที่เปลี่ยน Layout

กรอบ Preview ด้านล่างคือหน้าจอของคุณ ย่อหน้าต่าง Browser ให้แคบลง (หรือดูบนโทรศัพท์) แล้วสังเกต Card ที่เปลี่ยน Layout เพราะ Preview Pane มีความกว้างประมาณครึ่งหน้าจอบน Desktop Breakpoint ที่ max-width: 420px จะทำงานได้จริงโดยไม่ต้องใช้โทรศัพท์

<div class="card">
  <div class="card__image"></div>
  <div class="card__body">
    <h2 class="card__title">Sunset over the hills</h2>
    <p class="card__text">A short description of the photo that wraps naturally on small screens.</p>
    <a class="card__btn" href="#">View full size</a>
  </div>
</div>

ที่ความกว้างมากขึ้น รูปภาพและข้อความจะอยู่เคียงกัน เมื่อ Pane แคบกว่า 420 px Block @media (max-width: 420px) จะเริ่มทำงานและเรียงซ้อนกันในแนวตั้ง นี่คือสิ่งที่คุณจะแสดงให้ Developer เห็นโดยสลับระหว่าง Mobile และ Desktop Artboard ใน Figma

เปลี่ยน Typography ด้วย

คุณไม่จำกัดแค่ Layout สามารถเปลี่ยน Font Size ซ่อน Element ปรับ Spacing — ทุกอย่างใน CSS สามารถ Override ได้ภายใน Media Query

h1 {
  font-size: 2.5rem;   /* default: หน้าจอใหญ่ */
}

@media (max-width: 420px) {
  h1 {
    font-size: 1.6rem;  /* เล็กลงบนหน้าจอแคว */
  }
}

💡 ใช้ Breakpoint ที่ 420px ใน Preview ไม่ใช่ 768px

Preview Pane ในหลักสูตรนี้มีความกว้างประมาณครึ่งหน้าจอบน Desktop — ส่วนใหญ่ประมาณ 400–500 px กว้าง Breakpoint ที่ 768 px จะไม่เกิดขึ้นใน Preview เพราะ Pane แคบกว่านั้นอยู่แล้ว ใช้ Breakpoint ประมาณ 400–480 px ในตัวอย่างเพื่อสังเกตการเปลี่ยนแปลงโดยไม่ต้องใช้โทรศัพท์ ในโปรเจกต์จริงคุณจะใช้ Breakpoint มาตรฐาน (640 px, 768 px, 1024 px) แต่เพื่อการเรียนรู้ให้เล็กไว้ก่อน

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ออกแบบเฉพาะ breakpoint หลัก ๆ (375px, 1440px) แล้วสมมติว่าระหว่างกลางจะดูดีเอง
ตั้ง breakpoint ตาม “อุปกรณ์ที่มี” แทนตาม “จุดที่ content เริ่มพัง”

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “3 design เวอร์ชัน (mobile/tablet/desktop)” แต่ developer ต้องเขียนกฎ CSS ที่ครอบคลุมทุกความกว้างระหว่างกลางด้วย ไม่ใช่แค่ 3 จุดที่ design ไว้

💡 ตัวอย่างจากของจริง

BBC News และ The Guardian ทดสอบเว็บที่ทุกความกว้างหน้าจอ ไม่ใช่แค่ 3 breakpoint เพราะผู้อ่านใช้อุปกรณ์หลากหลายมาก