CSS Media Queries: Responsive Design ด้วย Media Queries

การออกแบบเว็บไซต์ที่เข้ากันได้กับอุปกรณ์ต่างๆ สำคัญสำหรับ accessibility ให้ผู้ใช้มากที่สุด

นั่นคือที่มาของ CSS Media Queries ใช้ CSS rule เฉพาะเมื่อเบราว์เซอร์ตรงตามเงื่อนไขที่กำหนด เช่น ใช้ rule เฉพาะมือถือ

บทเรียนนี้อธิบาย responsive web design พื้นฐาน การทำงานของ media queries และการออกแบบ media queries ของตัวเอง จนจบคุณจะเขียน media queries อย่างเชี่ยวชาญ

Responsive Web Design และ Media Queries

Responsive web design = ชุดปฏิบัติที่ developer เพิ่มประสิทธิภาพ stylesheet ให้เว็บแสดงถูกต้องบนอุปกรณ์และขนาดจอหลากหลาย

สำคัญเพราะ output device, browser window, screen size ส่งผลต่อการโหลดหน้าเว็บ หากไม่คิดถึงอุปกรณ์ต่างๆ ผู้ใช้บางกลุ่มอาจดูเนื้อหาไม่ครบ

Responsive design ครอบคลุมหลายอย่าง (flexbox, relative styles) แต media queries เป็นส่วนสำคัญของเว็บที่ responsive

Media queries ปรับสไตล์ตาม: ประเภทอุปกรณ์, orientation (แนวตั้ง/นอน), viewport size ทำให้องค์ประกอบแสดงต่างกันตามอุปกรณ์

Media Query Syntax

ใช้กฎ @media บังคับให้ browser รัน CSS block ก็ต่อเมื่อเงื่อนไขเป็นจริง

Syntax พื้นฐาน:

@media media-type and (media-rule) { /* CSS styles */ }

องค์ประกอบ:

• @media — สั่งสร้าง media query
• media-type — ประเภท media (screen, print, speech, all) default = all
• and — logical operator ใช้เมื่อระบุ media type และ media rule พร้อมกัน
• media-rule — เงื่อนไขที่ต้องเป็นจริงถึงจะรัน CSS ใน query
• CSS styles — กฎที่จะนำไปใช้หาก media-rule เป็นจริง

Media types: all, print, screen, speech ใช้หลาย type คั่นด้วย comma

CSS Media Rules (เงื่อนไข Media Queries)

Width และ Height

Rule หลักคือ device width/height ใช้สไตล์ตามขนาด viewport container (พื้นที่มองเห็นของผู้ใช้)

width และ height ใช้เมื่อ viewport เท่ากับค่าที่ระบุพอดี:

@media screen and (width: 500px) {
  p { color: blue; }
}

สีข้อความ <p> เป็นน้ำเงินก็ต่อเมื่อ viewport width = 500px พอดี

แต่มักใช้ ranges มากกว่า: min-width, min-height, max-width, max-height

ตัวอย่าง: viewport width ≥ 500px

@media screen and (min-width: 500px) {
  p { color: blue; }
}

ตรวจสอบ min-width: 500px หากจริง ใช้ rules ใน p style

Orientation (การวางแนว)

ใช้ media queries ตาม orientation ของอุปกรณ์

ตัวอย่าง: font-size 20px สำหรับ <h2> ใน landscape mode

@media (orientation: landscape) {
  h2 { font-size: 20px; }
}

Desktop default = landscape

ตัวอย่าง Media Queries

ตัวอย่าง 1: ซ่อน Element บน Mobile

กล่อง "This site is in beta" แสดงเฉพาะ mobile (ยังทดสอบ mobile experience)

<html>
  <p class="betaBox">This site is in beta.</p>
</html>

<style>
  .betaBox { background-color: orange; padding: 10px; }
  
  @media screen and (max-width: 600px) {
    .betaBox { display: none; }
  }
</style>

max-width: 600px = ใช้ rule ก็ต่อเมื่อ viewport แคบกว่า 600px (มือถือ) display: none ซ่อน element class betaBox

ตัวอย่าง 2: Multiple Media Queries - Font Size ตามขนาดจอ

เปลี่ยน font-size <h1> ตามขนาดจอ:

• ≤ 480px → 16px
• 481px - 600px → 20px
• ≥ 601px → 24px

<html>
  <h1>This is an example header.</h1>
</html>

<style>
  @media screen and (max-width: 480px) {
    h1 { font-size: 16px; }
  }
  
  @media screen and (min-width: 481px) and (max-width: 600px) {
    h1 { font-size: 20px; }
  }
  
  @media screen and (min-width: 601px) {
    h1 { font-size: 24px; }
  }
</style>

Media query แรก: max-width 480px → 16px
Media query ที่สอง: min-width 481px และ max-width 600px → 20px
Media query ที่สาม: min-width 601px → 24px

Media Query Breakpoints (จุดขาด)

Breakpoints = จุดที่เว็บจะใช้ media query

คำถามทั่วไป: ควรใช้ขนาดไหนสำหรับ breakpoints? เพราะอุปกรณ์หลากหลาย รายการขนาดจอออนไลน์มักไม่ครอบคลุมหมด

วิธีดีที่สุด: ดูเว็บของตัวเอง หาจุดที่องค์ประกอบบีบอัด/ตัดขอบ เช่น <div> แสดงผิดบนจอ < 500px → เขียน media query สำหรับ resolution นั้น

แนะนำ breakpoints เริ่มต้นสำหรับอุปกรณ์หลัก:

• มือถือส่วนใหญ่: @media screen and (max-width: 600px) {}
• แท็บเล็ตแนวตั้ง / โทรศัพท์ใหญ่: @media screen and (min-width: 600px) {}
• แท็บเล็ตแนวนอน: @media screen and (min-width: 768px) {}
• แลปท็อป/เดสก์ท็อป: @media screen and (min-width: 992px) {}
• แลปท็อป/เดสก์ท็อปจอใหญ่: @media screen and (min-width: 1200px) {}

ปรับตามความต้องการเว็บเฉพาะได้

สรุป

Media queries ใช้สร้าง responsive designs บนเว็บ ใช้สไตล์เฉพาะเมื่อเงื่อนไขเป็นจริง เช่น เปลี่ยน font-size เมื่อ width > 750px บทเรียนนี้ครอบคลุม: responsive design basics, media queries syntax, media rules (width/height, orientation), ตัวอย่าง basic และ multiple queries, และ breakpoints แนะนำ ตอนนี้คุณพร้อมเขียน media queries อย่างมืออาชีพ!