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

<h3>ทำเว็บไซต์ CSS3 Media Query คืออะไร เขียนคำสั่ง CSS ให้ทำงานในขนาดหน้าจอที่แตกต่างกัน<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>ทำเว็บไซต์ ด้วย CSS3<&sol;strong><br &sol;>&NewLine;Media Query คือคุณสมบัติที่มีอยู่ในภาษา CSS3 &lpar; Cascading Style Sheets &rpar; เป็นคำสั่งไว้สำหรับกำหนดการแสดงผลในรูปแบบต่าง ๆ ของข้อมูล โดยกฏการใช้งานจะขึ้นต้นด้วย <strong>&commat;media<&sol;strong> และตามด้วยเงื่อนไข &lpar; Condition &rpar; คำสั่ง CSS ทั้งหมด ที่ถูกครอบไว้ด้วย media query จะทำงานก็ต่อเมื่อเข้ากับเงื่อนไขของ media query นั้น ๆ เท่ากัน ตัวอย่างคำสั่ง media query<&excl;--more--><&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ตัวอย่าง Media Types รูปแบบต่าง ๆ<&sol;p>&NewLine;<h4>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&commat;media print &NewLine;&commat;media screen &NewLine;&commat;media speech &NewLine;&commat;media projection &NewLine;&commat;media tv &NewLine;&period;&period;&period;&period;&period;&period;&period;&period;&period;&period;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>การใช้งาน CSS3 Media Query<&sol;h4>&NewLine;<p>Types ของ Media Query จะมีอยู่หลายรูปแบบดังลิสต์รายการที่ได้เขียนไว้ด้านบน แต่ปกติคำสั่งที่เรามักจะใช้งานกันอยู่จะมีหลัก ๆ อยู่ 2 อย่างคือ &commat;media print &lpar; ไว้สำหรับกำหนดรูปแบบตอนพิมพ์ &rpar; และ &commat;media screen &lpar; ไว้สำหรับกำหนดรูปแบบการแสดงบนในแต่ละสกรีน &rpar; <&sol;p>&NewLine;<ul>&NewLine;<li>&NewLine;<strong>ตัวอย่างการใช้งาน &commat;media print<&sol;strong><br &sol;>&NewLine;ในขั้นตอนของการพิมพ์หน้าเว็บไซต์ เราอาจจะต้องการซ่อนเนื้อหาบางส่วนและแสดงเนื้อหาบางส่วนเท่านั้น เราสามารถเขียนคำสั่งได้ใน &commat;media print ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;&commat;media print &lbrace; &NewLine; &num;header &lbrace;display&colon;none&semi;&rcub; &NewLine; &num;content &lbrace;display&colon;block&semi;&rcub; &NewLine; &num;footer &lbrace;display&colon;none&semi;&rcub; &NewLine;&rcub;<&sol;pre>&NewLine;<p>จากโค๊ด css ด้านบนจะเห็นว่าเราสามารถใช้คำสั่ง display&colon;none ปิดส่วน header และ footer และแสดงเฉพาะ content ที่เราต้องการจะพิมพ์ออกมา&NewLine;<&sol;li>&NewLine;<li>&NewLine;<strong>ตัวอย่างการใช้งาน &commat;media screen<&sol;strong><br &sol;>&NewLine;เป็นคำสั่งที่นิยมใช้พัฒนาเว็บไซต์ให้แสดงผลในขนาดหน้าจอที่แตกต่างกัน เพราะปัจจุบันอุปกรณ์สมาร์ทโฟนมีขนาดหน้าจอที่หลากหลายมาก โดยเราสามารถใช้คำสั่ง &commat;media screen เพื่อกำหนดการแสดงผลให้เหมาะสมกับหน้าจอในแต่ละขนาดได้ ตัวอย่างเช่น<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&sol;&ast; iPhone 2G-4S &lpar;portrait and landscape&rpar; ----------- &ast;&sol; &NewLine;&commat;media only screen &NewLine;and &lpar;min-device-width &colon; 320px&rpar; &NewLine;and &lpar;max-device-width &colon; 480px&rpar; &lbrace; &NewLine;&sol;&ast; Styles &ast;&sol; &NewLine;&rcub; &NewLine;&sol;&ast; iPhone 5 &lpar;portrait&rpar; ----------- &ast;&sol; &NewLine;&commat;media only screen &NewLine;and &lpar;min-device-width &colon; 320px&rpar; &NewLine;and &lpar;max-device-width &colon; 568px&rpar; &NewLine;and &lpar;orientation &colon; portrait&rpar; &lbrace; &sol;&ast; STYLES GO HERE &ast;&sol; &rcub; &NewLine;&sol;&ast; iPads &lpar;portrait&rpar; ----------- &ast;&sol; &NewLine;&commat;media only screen &NewLine;and &lpar;min-device-width &colon; 768px&rpar; &NewLine;and &lpar;max-device-width &colon; 1024px&rpar; &NewLine;and &lpar;orientation &colon; portrait&rpar; &lbrace; &NewLine;&sol;&ast; Styles &ast;&sol; &NewLine;&rcub; &NewLine;&sol;&ast; Desktops and laptops ----------- &ast;&sol; &NewLine;&commat;media only screen &NewLine;and &lpar;min-width &colon; 1224px&rpar; &lbrace; &NewLine;&sol;&ast; Styles &ast;&sol; &NewLine;&rcub;<&sol;pre>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;