UFABET : จากบทความ “Em vs. Px vs. Percent : Font-Sizeเลือกใช้แบบไหนถึงจะดี?” ทำให้พวกเราเข้าใจดีแล้วว่าควรจะระบุ font-size โดยใช้หน่วยแบบ relative (%, em, rem) ไม่ใช่หน่วยแบบ absolute (px, pt) แม้กระนั้นแม้กระนั้น การกำหนด font-size สำหรับเพื่อการทำเว็บไซต์ก็ยังคงคือปัญหาสำหรับคนจำนวนไม่น้อย อยู่ดี
ทบทวนความรู้
ลักษณะที่แบบเดียวกันอย่างหนึ่งของหน่วยแบบ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 ของ <html> เสมอ ซึ่งแตกต่างจาก 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 สมมุติว่าพวกเราจะสร้างกล่องอะไรขึ้นมาสักกล่องหนึ่ง UFABET ได้แก่ กล่องข่าวล่าสุดกล่องข่าวสารที่ได้รับความนิยม หรือ กล่องค้นหาแล้วพวกเราต้องการให้กล่องดังที่กล่าวมาแล้ว มีขนาดตัวอักษรที่ไม่เหมือนกับ body ให้พวกเราระบุfont-size ของกล่องๆนี้ โดยใช้หน่วย rem ไม่ใช่em เพราะเหตุว่าพวกเราไม่ได้อยากต้องการมาห่วงกับปัญหาของ em ถ้าเกิดมีการนำกล่องนี้ไปใส่ไว้ด้านในกล่องอื่นๆอีกครั้ง
4. ใช้หน่วย em ที่ ส่วนย่อยต่างๆข้างในกล่อง
สำหรับส่วนต่างๆด้านในกล่องไม่ว่าจะเป็น header, footer หรือ p ให้พวกเราใช้หน่วย em เสมอ ด้วยเหตุว่าขนาดของมันจะได้เทียบกับ font-size ที่พวกเราระบุเอาไว้ที่ตัวกล่อง แม้พวกเราอยากได้ให้กล่องไหนมีตัวหนังสือใหญ่ขึ้นหรือเล็กลง พวกเราก็แค่ปรับ font-size ของตัวกล่องนั้นๆแล้วขนาดตัวอักษรของส่วนประกอบต่างๆข้างในกล่องก็จะเปลี่ยนแปลงตามในรูปทรงเดิมอัตโนมัติ
Workshop
เพื่อเห็นภาพมากเพิ่มขึ้น พวกเราลองประพฤติตามขั้นตอนดังที่ได้กล่าวมาแล้วตั้งแต่เริ่มกันดีกว่า
1. กำหนด font-size ที่ html ให้เป็น %
ในอันดับแรก พวกเราต้องระบุ font-size ให้กับ htmlโดยใช้หน่วยเป็น % ก่อน ในที่นี้จะขอกำคราวดให้เป็น 62.5%
การกำหนด font-size ให้เป็น 62.5% นั้นมีจุดเด่นตรงที่จะทำให้การใช้หน่วย rem นั้นง่ายดายมากยิ่งขึ้นมากมาย ด้วยเหตุว่าปกติแล้ว ขนาดตัวเขียนแบบ defaultนั้นจะอยู่ที่ราวๆ 16px ซึ่ง 62.5% ของ 16px จะมีค่าพอๆกับ 10px พอดิบพอดี เลยทำให้ 1rem มีค่าพอๆกับ 10px ไปโดยปริยาย
2. กำหนด font-size ที่ body ด้วย em
ถัดมาให้พวกเราระบุ font-size ให้เป็นขนาดที่พวกเราใช้บ่อยมากที่สุดในหน้าเว็บไซต์ สมมุติพวกเราถูกใจขนาด 14px ก็ให้พวกเราระบุเป็น 1.4em ได้เลย (อันที่จริงแล้วในส่วน body นี้พวกเราจะใช้ em หรือ remก็ได้ แม้กระนั้นเสนอแนะให้ใช้ em เนื่องจากจะเขียนรหัสสั้นกว่า)
ปัจจัยที่ต้องกำหนด font-size ที่ body ให้ตรงตามขนาดที่พวกเราใช้บ่อยครั้งที่สุดก็เพื่อจะทำให้พวกเราเขียนรหัสต่ำที่สุด พวกเราจะเขียนรหัส font-size เพิ่มเติมก็เมื่อพวกเราอยากได้ตัวอักษรในขนาดที่ไม่เหมือนกับนี้แค่นั้น
3. กำหนด font-size ที่กล่องเนื้อหาด้วย rem
สำหรับเพื่อการระบุขนาดตัวอักษรให้กับกล่องรายละเอียด ให้พวกเราใช้หน่วย rem เสมอ โดยขนาดที่จะกำหนดนั้นให้ยึดจากขนาดของตัวอักษร “ธรรมดา”ด้านในกล่องนั้นๆเป็นหลัก UFABET ดังเช่นว่า รายละเอียดที่mark up ด้วย <p> ฯลฯ สมมุติว่ากล่องนี้เป็นกล่องค้นหาปกติมิได้อยากให้เด่นอะไร พวกเราบางทีอาจกำหนดให้มีค่าขนาดเป็น 1.4rem พอๆกับ body ไปเลยก็ได้
อย่าลืมว่า rem นั้น จะไช้ได้ตั้งแต่ IE เวอร์ชัน 9เป็นต้นไป ด้วยเหตุผลดังกล่าวก่อนจะใช้ rem ให้พวกเราใส่ font-size ในหน่วย px เอาไว้ด้วยเสมอ แม้กระนั้นหากคนใดใช้ Sass อยู่แล้ว พวกเราก็บางทีอาจเขียน mixin กล้วยๆขึ้นมาช่วยก็ได้ อย่างงี้
แต่ว่าหากกล่องที่พวกเราจะสร้างนั้น UFABET เป็นกล่องไฮไลท์ที่พวกเราต้องการให้ตัวอักษรมีขนาดใหญ่กว่าธรรมดา ก็ให้พวกเราระบุขนาดที่อยากไปที่ตัวกล่องดังเดิม
4. กำหนด font-size ที่ส่วนย่อยภายในกล่องด้วย em
สำหรับส่วนประกอบต่างๆด้านในกล่องรายละเอียด ให้พวกเราใช้ em เสมอ จากแบบอย่างที่ผ่านมา ที่พวกเราจะสร้างกล่องไฮไลท์ ให้พวกเราระบุ font-size ในส่วนของ headings, paragraph รวมทั้ง footer ด้วยem อย่างนี้
แม้กระนั้นเพื่อความสบายสำหรับเพื่อการเขียนรหัส พวกเราบางทีอาจสร้างสไตล์กลางสำหรับกล่องรายละเอียดขึ้นมารอคอยไว้เลย UFABET พวกเราจะได้เขียนสไตล์เพิ่มเฉพาะในเวลาที่กล่องนั้นๆมีอะไรพิเศษจริงๆแค่นั้น อย่างงี้
ตั้งแต่นี้ต่อไป เวลาพวกเราจะสร้างกล่องอะไรขึ้นมาให้พวกเราใส่ class “block” เอาไว้ด้วยเสมอ
ถ้าหากพวกเราต้องการให้ขนาดโดยรวมของกล่องนั้นมากยิ่งกว่า 14px พวกเราก็แค่เขียนสไตล์เพิ่มเข้าไปอย่างนี้
เพียงเท่านี้ พวกเราก็จะทราบหมดว่า font-sizeทั้งหมดทั้งปวงของงานมีแค่ไหนบ้าง ยิ่งหากพวกเราดำเนินงานร่วมกับคนอื่นพวกเราก็จะทราบเหตุว่าเค้าได้เพิ่มขนาดไหนเข้ามา จะมีความเห็นว่าการจัดการ font-size ที่ดี UFABET นอกเหนือจากการที่จะช่วยให้รหัสสั้นลงแล้วยังช่วยทำให้การพัฒนาเว็บมีคุณภาพเพิ่มขึ้นเรื่อยๆอีกด้วย
Comments