สอน-CSS_Media_Queries

ทำเว็บไซต์ 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 */
    }

By codebee

- Programmer & Writer