ทำเว็บไซต์ ด้วย CSS3 Media Query คืออะไร และการใช้งาน

ทำเว็บไซต์ CSS3 Media Query คืออะไร เขียนคำสั่ง CSS ให้ทำงานในขนาดหน้าจอที่แตกต่างกัน

ทำเว็บไซต์ ด้วย CSS3
Media Query คือคุณสมบัติที่มีอยู่ในภาษา CSS3 ( Cascading Style Sheets ) เป็นคำสั่งไว้สำหรับกำหนดการแสดงผลในรูปแบบต่าง ๆ ของข้อมูล โดยกฏการใช้งานจะขึ้นต้นด้วย @media และตามด้วยเงื่อนไข ( Condition ) คำสั่ง CSS ทั้งหมด ที่ถูกครอบไว้ด้วย media query จะทำงานก็ต่อเมื่อเข้ากับเงื่อนไขของ media query นั้น ๆ เท่ากัน ตัวอย่างคำสั่ง media query

ตัวอย่าง Media Types รูปแบบต่าง ๆ

@media print
@media screen
@media speech
@media projection
@media tv
..........

การใช้งาน CSS3 Media Query

Types ของ Media Query จะมีอยู่หลายรูปแบบดังลิสต์รายการที่ได้เขียนไว้ด้านบน แต่ปกติคำสั่งที่เรามักจะใช้งานกันอยู่จะมีหลัก ๆ อยู่ 2 อย่างคือ @media print ( ไว้สำหรับกำหนดรูปแบบตอนพิมพ์ ) และ @media screen ( ไว้สำหรับกำหนดรูปแบบการแสดงบนในแต่ละสกรีน )

• ตัวอย่างการใช้งาน @media print
  ในขั้นตอนของการพิมพ์หน้าเว็บไซต์ เราอาจจะต้องการซ่อนเนื้อหาบางส่วนและแสดงเนื้อหาบางส่วนเท่านั้น เราสามารถเขียนคำสั่งได้ใน @media print ดังนี้

  @media print {
    #header {display:none;}
    #content {display:block;}
    #footer {display:none;}
  }

  จากโค๊ด css ด้านบนจะเห็นว่าเราสามารถใช้คำสั่ง display:none ปิดส่วน header และ footer และแสดงเฉพาะ content ที่เราต้องการจะพิมพ์ออกมา

• ตัวอย่างการใช้งาน @media screen
  เป็นคำสั่งที่นิยมใช้พัฒนาเว็บไซต์ให้แสดงผลในขนาดหน้าจอที่แตกต่างกัน เพราะปัจจุบันอุปกรณ์สมาร์ทโฟนมีขนาดหน้าจอที่หลากหลายมาก โดยเราสามารถใช้คำสั่ง @media screen เพื่อกำหนดการแสดงผลให้เหมาะสมกับหน้าจอในแต่ละขนาดได้ ตัวอย่างเช่น

  /* iPhone 2G-4S (portrait and landscape) ----------- */
  @media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 480px) {
  /* Styles */
  }
  /* iPhone 5 (portrait) ----------- */
  @media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 568px) 
  and (orientation : portrait) { /* STYLES GO HERE */ }
  /* iPads (portrait) ----------- */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : portrait) {
  /* Styles */
  }
  /* Desktops and laptops ----------- */
  @media only screen 
  and (min-width : 1224px) {
  /* Styles */
  }