1. ออกแบบให้เรียบง่าย
2. เริ่มที่หน้าจอเล็กสุดก่อนเสมอ
3. กำหนดขนาดแบบ Relative
สิ่งแรกที่เราต้องกำหนดให้เป็นแบบ relative ก็คือ layout นั่นเองครับ หรือที่เรียกกันว่า Fluid Layouts ซึ่งก็คือการกำหนด layout ต่างๆ ให้ความกว้างหน่วยเป็น % คือไม่ได้กำหนดตายตัวเป็น pixel เหมือนแต่ก่อน
หลายๆ คน คงเคยเจอปัญหาเกี่ยวกับ box model ใช่มั้ยครับ สมมติเว็บเรามี 2 คอลัมน์ ซึ่งกำหนดความกว้างไว้ 60% และ 40% ตามลำดับ ถ้าเราได้กำหนด margin หรือ padding เอาไว้ด้วย ผลที่ได้คือ ความกว้างของ 2 คอลัมน์ จะรวมกันเกิน 100% ครับ ปัญหานี้แก้โดยใส่ CSS Rule ตามด้านล่างนี้ครับ
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
ต่อมาให้เรากำหนดขนาดของ image ให้เป็นแบบ relative ด้วย โดยกำหนดความกว้างเป็น % ให้อิงตาม container ของ image นั้นๆ จากนั้นให้เรากำหนด max-width ให้เป็นความกว้างที่แท้จริงของ image ด้วยครับ ภาพจะได้ไม่แตก เวลา container มีขนาดใหญ่มากๆ
อีกเรื่องนึงที่ควรกำหนดขนาดให้เป็นแบบ relative ก็คือ font เริ่มจากกำหนดขนาดของ font ที่ body ให้เป็น 100% ซึ่งจะทำให้ขนาดของ font ใน element ต่างๆ ที่อยู่ใน body มีขนาด 100% ทั้งหมด หากเราต้องการกำหนดขนาดของ font ใน element ไหนเป็นพิเศษ ให้เราใช้หน่วย em ครับ ซึ่งหน่วย em นี้หมายถึงจำนวนเท่าของขนาดที่ inherit มาครับ ซึ่งในทีนี้ เราได้กำหนดเป็น 100% จะได้ว่า ถ้าเรากำหนดขนาดเป็น 2 em ก็จะได้ font ขนาด 200% นั่นเองครับ
ใช้การกำหนดขนาดแบบ relative แทนการกำหนดขนาดเป็น pixel
ที่มา
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น