ໃຊ້ Ems ເພື່ອປ່ຽນຂະຫນາດຕົວອັກສອນ
ໃນເວລາທີ່ທ່ານສ້າງຫນ້າເວັບ, ຜູ້ຊ່ຽວຊານສ່ວນຫຼາຍແນະນໍາວ່າທ່ານຂະຫນາດຕົວອັກສອນ (ແລະໃນຄວາມເປັນຈິງ, ທຸກສິ່ງທຸກຢ່າງ) ດ້ວຍມາດຕະການທີ່ກ່ຽວຂ້ອງເຊັ່ນ: ems, exs, percentages, or pixels. ນີ້ແມ່ນຍ້ອນວ່າທ່ານກໍ່ບໍ່ຮູ້ທຸກວິທີທີ່ແຕກຕ່າງກັນທີ່ຜູ້ໃດຜູ້ຫນຶ່ງສາມາດເບິ່ງເນື້ອໃນຂອງທ່ານ. ແລະຖ້າທ່ານໃຊ້ມາດຕະການຢ່າງແທ້ຈິງ (inches, centimeters, millimeters, points, or picas) ມັນອາດຈະສົ່ງຜົນກະທົບຕໍ່ການສະແດງຫຼືການອ່ານຂອງຫນ້າໃນອຸປະກອນຕ່າງໆ.
ແລະ W3C ແນະນໍາໃຫ້ທ່ານໃຊ້ ems ສໍາລັບຂະຫນາດ.
ແຕ່ວິທີການໃຫຍ່ແມ່ນຫຍັງ?
ອີງຕາມການ W3C ໄດ້:
"ແມ່ນເທົ່າກັບມູນຄ່າທີ່ຖືກຄິດໄລ່ຂອງຄຸນສົມບັດ" font-size "ຂອງອົງປະກອບທີ່ມັນຖືກນໍາໃຊ້. ຂໍ້ຍົກເວັ້ນແມ່ນເມື່ອ 'em' ເກີດຂື້ນໃນມູນຄ່າຂອງຊັບສິນ 'font-size' ຕົວມັນເອງ, ໃນກໍລະນີທີ່ມັນຫມາຍເຖິງ ກັບຂະຫນາດຕົວອັກສອນຂອງອົງປະກອບແມ່. "
ໃນຄໍາສັບຕ່າງໆອື່ນໆ, ems ບໍ່ມີຂະຫນາດຢ່າງແທ້ຈິງ. ພວກເຂົາໃຊ້ເວລາກ່ຽວກັບຄຸນຄ່າຂອງພວກເຂົາໂດຍອີງໃສ່ບ່ອນທີ່ພວກເຂົາມີ. ສໍາລັບ ຜູ້ອອກແບບເວັບ ສ່ວນໃຫຍ່, ນີ້ຫມາຍຄວາມວ່າພວກເຂົາຢູ່ໃນຕົວທ່ອງເວັບ, ດັ່ງນັ້ນ font ທີ່ສູງ 1em ແມ່ນຂະຫນາດດຽວກັບຂະຫນາດຕົວອັກສອນເລີ່ມຕົ້ນສໍາລັບຕົວທ່ອງເວັບທີ່.
ແຕ່ວິທີການສູງແມ່ນຂະຫນາດເລີ່ມຕົ້ນ? ບໍ່ມີວິທີທີ່ຈະມີຄວາມແນ່ນອນ 100% ຍ້ອນວ່າລູກຄ້າສາມາດປ່ຽນຂະຫນາດຕົວອັກສອນທໍາອິດໃນຕົວທ່ອງເວັບຂອງພວກເຂົາແຕ່ເນື່ອງຈາກຄົນສ່ວນໃຫຍ່ບໍ່ສາມາດສົມມຸດວ່າຕົວທ່ອງເວັບສ່ວນໃຫຍ່ມີຂະຫນາດຕົວອັກສອນທໍາອິດຂອງ 16px. ດັ່ງນັ້ນສ່ວນໃຫຍ່ຂອງເວລາ 1em = 16px .
ຄິດໃນພິກະເຊນ, ໃຊ້ Ems ສໍາລັບການວັດແທກ
ເມື່ອທ່ານຮູ້ວ່າຂະຫນາດຕົວອັກສອນເລີ່ມຕົ້ນແມ່ນ 16px, ທ່ານສາມາດໃຊ້ ems ເພື່ອອະນຸຍາດໃຫ້ລູກຄ້າຂອງທ່ານປັບຂະຫນາດຫນ້າໄດ້ງ່າຍແຕ່ຄິດວ່າເປັນ pixels ສໍາລັບຂະຫນາດຕົວອັກສອນຂອງທ່ານ.
ບອກວ່າທ່ານມີໂຄງສ້າງທີ່ມີຂະຫນາດໃຫຍ່ເຊັ່ນ:
- Headline 1 - 20px
- Headline 2 - 18px
- Headline 3 - 16px
- ຂໍ້ຄວາມຫລັກ - 14px
- Sub text-12px
- Footnotes-10px
ທ່ານສາມາດກໍານົດວິທີການທີ່ໃຊ້ pixels ສໍາລັບການວັດແທກນັ້ນ, ແຕ່ວ່າທຸກຄົນທີ່ໃຊ້ IE 6 ແລະ 7 ຈະບໍ່ສາມາດປັບຂະຫນາດຂອງຫນ້າຂອງທ່ານໄດ້ດີ. ດັ່ງນັ້ນ, ທ່ານຄວນຈະປ່ຽນຂະຫນາດເພື່ອ ems ແລະນີ້ແມ່ນພຽງແຕ່ເລື່ອງຂອງຄະນິດສາດບາງ:
- ຫົວຂໍ້ 1 - 1.25em (16 x 125 = 20)
- ຫົວຂໍ້ 2 - 1.125em (16 × 1.12 = 18)
- ຫົວຂໍ້ 3 - 1em (1em = 16px)
- ຂໍ້ຄວາມຫລັກ - 0.875em (16 x 0.875 = 14)
- Sub text-075em (16 x 075 = 12)
- ຫມາຍເຫດ - 0625em (16 x 0625 = 10)
ຢ່າລືມລືມມໍລະດົກ!
ແຕ່ວ່າບໍ່ແມ່ນທັງຫມົດທີ່ມີຢູ່. ສິ່ງອື່ນທີ່ທ່ານຈໍາເປັນຕ້ອງຈື່ແມ່ນວ່າພວກເຂົາໃຊ້ຂະຫນາດຂອງພໍ່ແມ່. ດັ່ງນັ້ນ, ຖ້າທ່ານມີອົງປະກອບທີ່ມີຮັງສີທີ່ມີຂະຫນາດຕົວອັກສອນທີ່ແຕກຕ່າງກັນ, ທ່ານອາດຈະສິ້ນສຸດດ້ວຍຕົວອັກສອນທີ່ນ້ອຍກວ່າຫຼືໃຫຍ່ກວ່າທີ່ທ່ານຄາດຫວັງ.
ຕົວຢ່າງ, ທ່ານອາດຈະມີເອກະສານສະໄຕເຊັ່ນ:
p {font-size: 0875em }
footnote {font-size: 0625em }
ນີ້ຈະເປັນຜົນມາຈາກຕົວອັກສອນທີ່ມີ 14px ແລະ 10px ສໍາລັບຂໍ້ຄວາມຕົ້ນຕໍແລະຕົວຫນັງສືຕາມລໍາດັບ. ແຕ່ຖ້າທ່ານໃສ່ຫມາຍເລກໄວ້ໃນວັກຫນຶ່ງ, ທ່ານອາດຈະສິ້ນສຸດດ້ວຍຂໍ້ຄວາມທີ່ 8.75px ແທນ 10px. ລອງໃຊ້ຕົວທ່ານເອງໃຫ້ໃສ່ CSS ຂ້າງເທິງນີ້ແລະໃສ່ HTML ດັ່ງຕໍ່ໄປນີ້:
ຕົວອັກສອນນີ້ແມ່ນ 14px ຫຼື 0.875 ເອັມໃນລະດັບສູງ.
ຫຍໍ້ຫນ້ານີ້ມີຂໍ້ມູນເບື້ອງເທິງ.
ໃນຂະນະທີ່ນີ້ແມ່ນພຽງແຕ່ວັກທ້າຍ.
ຂໍ້ຄວາມຕົວຫນັງສືແມ່ນຍາກທີ່ຈະອ່ານຢູ່ 10px, ມັນເກືອບບໍ່ສາມາດອ່ານໄດ້ 8.75px.
ດັ່ງນັ້ນ, ໃນເວລາທີ່ທ່ານໃຊ້ ems, ທ່ານຈໍາເປັນຕ້ອງຮູ້ຫຼາຍກ່ຽວກັບຂະຫນາດຂອງສິ່ງຂອງພໍ່ແມ່, ຫຼືທ່ານຈະສິ້ນສຸດດ້ວຍບາງອົງປະກອບທີ່ມີຂະຫນາດຄີກໃນຫນ້າຂອງທ່ານ.