“Ems” (em) เป็นหน่วยที่ใช้เทียบกับขนาด font-size ของ body หรือถ้าไม่มีการกำหนด font-size ให้กับ body ก็จะเป็นค่าเริ่มต้น (16px) และสามารถย่อหรือขยายได้ (scalable) เช่น เราใช้ body {font-size: 12px} แสดงว่าถ้าเรากำหนด font-size เป็น 1em = 12px ดังนั้นถ้าเรากำหนด font-size เป็น 2em ก็จะเท่ากับ 24px หรือ .5em ก็ควรจะเท่ากับ 6px ครับ
เพื่อนๆ อาจจะเคยเห็นบางเว็บไซต์ที่มีการกำหนด font-size ของ body เป็น 62.5% ( body{font-size: 62.5%;} ) อยากรู้ที่มารึป่าวครับ ^^ ถ้าเราต้องการใช้ประโยชน์ที่สามารถย่อขยายได้ และต้องการค่าในหน่วย em ที่มีค่าเท่ากับหน่วย px (pixels) ที่เราต้องการ เค้าก็มีสูตรในการคำนวนให้ครับ
ค่า px ที่ต้องการ / ค่า px ของ body = em
เช่น อยากได้ font-size: 12px ในหน่วย em จะต้องระบุค่าเท่าไร โดยใช้ค่า font-size ของ body เป็น 16px (ค่าเริ่มต้น) ก็จะต้องให้ค่าเป็น 0.75em (12/16 = 0.75) ถ้าต้องการ 10px ก็ต้องกำหนดเป็น 0.625em (10/16 = 0.625) ถ้าต้องการ 22px ก็ต้องกำหนดเป็น 1.375em (22/16 = 1.375) ถึงตรงนี้เพื่อนๆ อาจจะสังเกตเห็นตัวเลข 0.625 ที่เป็นพระเอกของบทความนี้แล้ว ^^
เพื่อนๆ จะเห็นว่าถ้าเราจะใช้หน่วยเป็น em และให้คำนวณหาขนาดของ font-size ในหน่วย em ให้ตรงกับค่าที่เป็น pixel นั้น ถ้าเราใช้ 62.5% ของ 16px ก็จะมีค่าเท่ากับ 10px พอดี ดังนั้น ถ้าเรากำหนด font-size ของ body เป็น 62.5% เราจะสามารถกำหนดค่าของหน่วย em ให้สอดคล้องกับ px ได้ง่ายมาก แค่เอาค่าที่อยากได้ในหน่วย px หารด้วย 10 ก็จะได้ค่าของหน่วย em แล้วครับ เช่น อยากได้ font-size ขนาด 16px ในหน่วย em ก็จะเป็น 1.6em หรือถ้าต้องการขนาด 14px ก็จะเป็น 1.4em
ซึ่งนี่ก็คือที่มาของเทคนิค 62.5% ครับ ^^