การเขียน CSS Elastic Layout
หลังจากที่ลองเล่นกับ CSS แบบ Liquid Layout ไปแล้วตอนนี้มาลองเล่นแบบอื่นกันดูบ้างครับ Elastic Layout เป็นรูปแบบการเขียน CSS ที่ผมนำมาเสนอเป็นรูปแบบที่สอง จะเป็นอย่างไรนั้น ตามมาดูกันครับ
การเขียนหน้าเว็บแบบ Elastic Layout มีสูตรที่ผมคิดขึ้นมาง่ายจากปกติ ฟ้อนท์ไซท์ 16px ซึ่งเป็นค่ามาตรฐานของบราวเซอร์ทั่วไป กับค่าเฉลี่ยนความกว้างหน้าเว็บที่ 950px ถ้าตั้งค่า body ให้ฟ้อนท์ขนาด 80% ของ 16px หรือ 0.8em ค่าความกว้างของ div หลักจะอยู่ที่ประมาณ 74em ค่าความกว้างเบื้องต้น ถ้าเรายึดเอาไว้ว่าจะใช้เท่าไหร่แล้ว อย่าพยายามเปลี่ยน เช่น ถ้ามีคนมาบอกว่า ตัวหนังสือในหน้ามันเล็กไป ขยายขึ้นอีกได้ไหม คำตอบคือได้ แต่ ขนาดหน้าเว็บจะขยายตาม เช่น ถ้าเราเปลี่ยน ขนาดตัวหนังสือจาก 80% หรือ 0.8em ไปเป็น 85% หรือ 0.85em หน้าเว็บจะยายกลายเป็นกว้างประมาณ 1008px ทันที ไม่ใช่ 950px อย่างที่เป็นตอนแรก จึงให้พึงระวังตรงนี้ไว้ด้วยนะครับ ถ้าเปลี่ยนไปแล้วอย่าลืมไปลดขนาดความกว้างของ div หลักลงไปด้วย
สำหรับใครที่จะหด ย่อ หรือขยายหน้าให้กว้างกว่านี้ก็เลือกปรับแต่งลองเล่นตามสบาย