สอน-CSS_Media_Queries

ทำเว็บไซต์ ด้วย 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 รูปแบบต่าง ๆ



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

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

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

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

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

กระทู้ใกล้เคียง

วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไ... วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไซต์ วิธีทำเว็บ ให้โหลดเร็ว เคยไหมครับที่คลิกลิงค์ข่าวจาก facebook เพราะอ่านคำโปรยแล้ว อยากจะเข้...
robots.txt คืออะไร และวิธีสร้างไฟล์ robots.txt... robots.txt คืออะไร และวิธีสร้างไฟล์ robots.txt ไฟล์ robots.txt จะทำหน้าที่อนุญาติและยกเว้นการเข้าถึงไฟล์และโฟลเด้อต่าง ๆ ที่อยู่บน web server ให้กั...
วิธีทำ Banner ให้เว็บไซต์ แบบเปิดปิดอัตโนมัติ... วิธีทำ Banner ให้เว็บไซต์ แบบเปิดปิดอัตโนมัติ วิธีทำ Banner ดูตัวอย่าง Banner หลาย ๆ เว็บไซต์จำเป็นต้องมีการแสดง Banner เพราะบางทีแบนเนอร...
ทำเว็บไซต์ สอน CSS การใช้งาน before, after และ con... ทำเว็บไซต์ สอน CSS การใช้งาน before, after และ content ทำเว็บไซต์ สอน CSS คงจะเคยผ่านตามากันบ้างแล้วสำหรับนักพัฒนาเว็บไซต์สำหรับ before, after และ...