Responsive Web Design
เป็นการออกแบบเพื่อให้เว็บไซต์แสดงผลได้ใน อุปกรณ์ที่ต่างกัน โดยใช้ website เดิม โดยใช้เทคนิค 3 อย่างด้วยกัน Fluid Grid, Flexible Images,CSS3 Media Queries Fluid Grid ซึ่งก็คือการออกแบบ Grid ให้เป็นแบบ Relative ซึ่งก็คือการที่ไม่ได้กำหนดขนาดของ Grid แบบตายตัว แต่จะกำหนดให้สัมพันธ์กับสิ่งอื่นๆ เช่น กำหนดความกว้างแบบเป็น % หรือการใช้ font-size หน่วยเป็น em เป็นต้น Flexible Images หรือการกำหนดขนาดของ Images ต่างๆ ให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล หากรูปต้นฉบับมีขนาดใหญ่มาก เวลาแสดงในมือถือที่มีจอขนาดเล็ก ก็ควรลดขนาดลงมา เพื่อให้แสดงผลได้อย่างสวยงาม CSS3 Media Queries ซึ่งจะช่วยให้เราสามารถกำหนด style sheets สำหรับ Devices ต่างๆ ได้ โดยส่วนใหญ่ เราจะเขียน style sheets พื้นฐานเอาไว้ ซึ่งกลุ่มนี้ จะไม่ขึ้นอยู่กับ Devices ใดๆ หลังจากนั้นให้เราเขียน style sheets สำหรับ Devices ที่มีขนาดหน้าจอที่เล็กสุด เพิ่มขึ้นไปเรื่อยๆ จนถึงขนาดใหญ่สุด ซึ่งการเขียนแบบนี้ จะช่วยลดความซ้ำซ้อนของโค้ด และยังทำให้การแก้โค้ดในภายหลังทำได้ง่ายอีกด้วย
CSS3 Media Queries
เป็นการเพิ่มข้อกำหนดให้กับ Media Types เช่น screen and (min-width:1024px) หน้าจอที่มีความกว้างอย่างน้อย 1024px ช่วยจำแนก device ต่างๆ ได้ดียิ่งขึ้น หากอยากทำให้ Web Browser ที่ไม่รองรับ ให้ใช้ “HTML5 Cross Browser Polyfills”
ไม่มีความคิดเห็น:
แสดงความคิดเห็น