การออกแบบเว็บบนมือถือมีประโยชน์มากมาย แต่เมื่อใช้อย่างถูกต้องเท่านั้น เทคนิคที่เหมาะสมจะช่วยให้สามารถนำเสนอเพจได้ดีบนหน้าจอขนาดใหญ่ หน้าจอขนาดเล็ก และหน้าจอ PDA ขนาดเล็ก อย่างไรก็ตาม โครงสร้างโค้ดที่ไม่ดีจะส่งผลเสียต่อเลย์เอาต์ที่ลื่นไหล ดังนั้นเราจึงจำเป็นต้องค้นหาวิธีแก้ปัญหาที่เป็นไปได้สำหรับข้อบกพร่องของการออกแบบโฟลว์ส่วนใหญ่
หากคุณในฐานะนักออกแบบได้ทุ่มเทอย่างหนักเพื่อสร้างเค้าโครงที่ลื่นไหลและใช้งานได้จริง ทำไมไม่ลองก้าวไปอีกขั้นและทำให้เข้ากันได้กับทุกความละเอียด แทนที่จะจำกัดอยู่เพียงหน้าจอส่วนใหญ่ คุณสามารถใช้เทคนิคบางอย่างเพื่อสร้างเลย์เอาต์ที่ปรับเปลี่ยนได้โดยไม่คาดคิด ซึ่งยังคงใช้งานได้เหมือนเดิมเมื่อความละเอียดของหน้าจอเปลี่ยนไป
ในบทความนี้ เราจะพูดถึงวิธีการที่ได้รับการพิสูจน์แล้วสำหรับการสร้างเค้าโครง CSS ที่ตอบสนองการทำงานได้ 100% และให้รายการโดยละเอียดของบทช่วยสอนและแนวปฏิบัติอื่นๆ:
คุณยังสามารถอ้างอิงถึงบทความก่อนหน้าได้:
1. เค้าโครงของเหลวโดยใช้กริด
พวกเราส่วนใหญ่เคยได้ยินเกี่ยวกับ ระบบกริด 960 สำหรับการออกแบบหน้าเว็บที่มีความกว้างคงที่ การใช้ระบบกริด 960 ทำให้การออกแบบที่มีความกว้างคงที่ดีกว่ารูปแบบที่ลื่นไหล อย่างไรก็ตาม มีวิธีสร้าง เค้าโครงดิ้น ตามตาราง ในทางเทคนิคแล้ว โครงสร้างโค้ดของเลย์เอาต์แบบยืดหยุ่นนั้นแตกต่างจากเลย์เอาต์แบบไหล แต่ให้ผลเกือบเหมือนกันกับผู้ใช้
เค้าโครงโฟลว์คืออะไร?
ตารางของเหลวถูกสร้างขึ้นผ่านการใช้ div เปอร์เซ็นต์ และการคำนวณทางคณิตศาสตร์อย่างชาญฉลาดอย่างชาญฉลาด แนวคิดนี้มาจาก Ethan Marcotte ผู้ซึ่งรับรู้ว่า "em" เป็นการปรับปรุงขนาดตัวอักษร เรากลับมาทบทวนแนวคิดพื้นฐานนี้ที่นี่ แต่เพื่อความเข้าใจที่ครอบคลุมและละเอียดของแนวทางนี้ โปรดดู "Flowing Grid" บทช่วยสอนที่ครอบคลุมเกี่ยวกับการสร้างเค้าโครงที่ยืดหยุ่นตามตาราง
แนวคิดคือการใช้ขนาดสัมพัทธ์ รวมเปอร์เซ็นต์และ ems และใช้การแยกแบบง่ายๆ เพื่อค้นหาความกว้างพิกเซลที่สอดคล้องกันซึ่งใช้ในการออกแบบที่มีความกว้างคงที่
ข้อได้เปรียบ :