ทบทวนความรู้
ลักษณะที่เหมือนกันอย่างหนึ่งของหน่วยแบบ relative ก็คือ ค่าของมันจะขึ้นอยู่กับ element ที่เป็น parent อย่างไรก็ตาม ทั้ง %, em, rem ก็ยังคงมีความแตกต่างกันอยู่ดี
- Percentใช้ได้กับ property ทั่วๆ ไป อย่าง
width,height,line-heightรวมไปถึงfont-sizeสมมติเรากำหนดwidth:50%;จะได้ว่า element นี้ จะมีความกว้างเพียงแค่ครึ่งเดียวของ element ที่เป็น parent ของมัน - Emคล้ายกับ % เพียงแต่ค่าของ em จะถูกนำไปเทียบกับค่า font-size ของ element ที่เป็น parent ของมันเสมอ โดย 1em จะมีค่าเท่ากับ 1เท่า หรือ 100% นั่นเอง สมมติว่าเรากำหนด
font-sizeของ element ที่เป็น parent ให้เป็น 15px จะได้ว่าwidth:10em;มีค่าเท่ากับ 15×10 = 150px อย่างไรก็ตาม เราอาจพบปัญหาหากมี element ซ้อนกันเยอะๆ เพราะ 1em ของ element หนึ่ง อาจมีค่าไม่เท่ากับ 1em ของอีก element หนึ่ง ที่อยู่คนละระดับชั้นกัน - Remคล้ายกับหน่วย em เพียงแต่มันจะไปเทียบขนาดกับ
font-sizeของเสมอ ซึ่งต่างจาก em ที่จะเทียบกับ element ที่เป็น parent ของมัน ข้อดีของการใช้ rem ก็คือ เราจะไม่เจอปัญหาเหมือนกับการใช้ em แต่การใช้ rem ก็มีข้อเสียเหมือนกันเวลานำไปใช้กับส่วนย่อยต่างๆ ภายในกล่องเนื้อหาเพราะหากเรามีการเปลี่ยนfont-sizeที่กล่องนั้นๆ แล้วล่ะก็ ส่วนย่อยต่างๆที่กำหนดfont-sizeด้วย rem ก็จะไม่เปลี่ยนขนาดตาม
กำหนด font-size อย่างไรให้เหมาะสม ?
จากคุณสมบัติของทั้ง 3 หน่วย ข้างต้น ทำให้เราสามารถนำมาประยุกต์ใช้ในการทำเว็บได้ดังนี้
- 1. ใช้หน่วย % ที่
htmlจริงๆ แล้วเราจะเลือกใช้หน่วย % หรือ em ก็ได้ ที่htmlแต่ที่แนะนำให้ใช้เป็น %ก็เพราะว่าจะได้ไม่มีปัญหาขนาดตัวอักษรผิดเพี้ยนใน IE เวอร์ชันเก่าๆ ส่วนสาเหตุที่ต้องมากำหนดfont-sizeที่htmlเลยก็เพื่อที่จะรองรับการใช้หน่วย rem นั่นเอง - 2. ใช้หน่วย em ที่
bodyต่อมาให้เรากำหนดfont-sizeที่bodyโดยใช้หน่วย em ในส่วนนี้ให้เรากำหนดเป็นขนาดที่เราใช้เยอะที่สุดในหน้าเว็บเพื่อที่จะลดการเขียนโค้ดให้น้อยที่สุด (หากเป็นหน่วย px ก็มักจะเป็น 13px หรือ 14px สำหรับเว็บภาษาไทย) - 3. ใช้หน่วย rem ที่กล่องต่างๆมาถึงจุดนี้ ตัวหนังสือทั่วๆ ไป ก็จะมีขนาดตามที่เรากำหนดไว้ที่
bodyสมมติว่าเราจะสร้างกล่องอะไรขึ้นมาสักกล่องหนึ่ง เช่น กล่องข่าวล่าสุด กล่องข่าวยอดนิยม หรือ กล่องค้นหา แล้วเราอยากให้กล่องดังกล่าว มีขนาดตัวหนังสือที่ต่างจากbodyให้เรากำหนดfont-sizeของกล่องๆ นี้ โดยใช้หน่วย rem ไม่ใช่ em เพราะเราไม่อยากมาพะวงกับปัญหาของ em หากมีการนำกล่องนี้ไปใส่ไว้ในกล่องอื่นๆ อีกที - 4. ใช้หน่วย em ที่ ส่วนย่อยต่างๆ ภายในกล่องสำหรับส่วนต่างๆ ภายในกล่องไม่ว่าจะเป็น
header,footerหรือpให้เราใช้หน่วย em เสมอ เพราะขนาดของมันจะได้เทียบกับfont-sizeที่เรากำหนดเอาไว้ที่ตัวกล่อง หากเราต้องการให้กล่องไหนมีตัวหนังสือใหญ่ขึ้นหรือเล็กลง เราก็แค่ปรับfont-sizeของตัวกล่องนั้นๆ แล้วขนาดตัวหนังสือขององค์ประกอบต่างๆ ภายในกล่องก็จะปรับเปลี่ยนตามในสัดส่วนเดิมโดยอัตโนมัติ
ที่มา
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น