ຄວາມເຂົ້າໃຈກ່ຽວກັບຂະ ໜາດ ຕົວອັກສອນ (PX vs EM vs REM)

ຄວາມເຂົ້າໃຈກ່ຽວກັບຂະ ໜາດ ຕົວອັກສອນ

ຂະ ໜາດ ຕົວອັກສອນມີບົດບາດ ສຳ ຄັນຫຼາຍໃນເວບໄຊທ໌, ຂະ ໜາດ ຕົວອັກສອນແມ່ນ ໜຶ່ງ ໃນຄຸນລັກສະນະ css, ຂະ ໜາດ ຕົວອັກສອນຫຼືຂະ ໜາດ ຕົວ ໜັງ ສືແມ່ນຂະ ໜາດ ຂອງຕົວອັກສອນທີ່ສະແດງໃນ ໜ້າ ເວັບ. ຕົວອັກສອນແມ່ນຖືກວັດແທກໂດຍທົ່ວໄປເປັນຈຸດ (pt) ແລະ ຄຳ ນິຍາມທົ່ວໄປເປັນ pixel (px).

ໂດຍປ້ອງກັນຂະ ໜາດ ໂຕອັກສອນພື້ນຖານ (ຂະ ໜາດ ຕົວອັກສອນຂອງຮ່າງກາຍ) ຂອງ ໜ້າ ເວບໃດ ໜຶ່ງ ແມ່ນ 16px, ຈົນກວ່າພວກເຮົາຈະ ກຳ ນົດຂະ ໜາດ ຕົວອັກສອນທີ່ ກຳ ນົດເອງ.
ຄຸນສົມບັດຂອງຂະ ໜາດ ຕົວອັກສອນໄດ້ຖືກ ກຳ ນົດໄວ້ໃນ ໜຶ່ງ ໃນວິທີຕໍ່ໄປນີ້:

1. ຂະ ໜາດ ຂາດຕົວຫຼືຂະ ໜາດ Relative-size
2. ເປັນຄວາມຍາວຫລືເປີເຊັນ (ທຽບກັບຂະ ໜາດ ຕົວອັກສອນຂອງພໍ່ແມ່)

Syntax ພື້ນຖານ

Syntax ພື້ນຖານຂອງຕົວອັກສອນ

ຂະ ໜາດ ຂາດຕົວ
xx-small, x-small, small, xx-large, x-large, large
ຂະ ໜາດ ໂຕອັກສອນພ້ອມ ຄຳ ທີ່ມີຂະ ໜາດ ທີ່ສົມບູນ, ຈະໃຫຍ່ກວ່າຫຼືນ້ອຍກວ່າຂະ ໜາດ ຕົວອັກສອນຂອງພໍ່ແມ່.

ຂະ ໜາດ ພີ່ນ້ອງ
ຂະຫນາດນ້ອຍກວ່າ, ຂະຫນາດໃຫຍ່

ຄວາມຍາວ - ຂະ ໜາດ
ຂະ ໜາດ ຕົວອັກສອນທີ່ ກຳ ນົດໃນຄວາມຍາວຈະມີຄຸນຄ່າໃນທາງບວກ, ໃຊ້ຫົວ ໜ່ວຍ ທີ່ໃຊ້ຕົວອັກສອນທີ່ກ່ຽວຂ້ອງເຊັ່ນ em ແລະ px

ເປີເຊັນ - ຂະ ໜາດ
ຂະ ໜາດ ໂຕອັກສອນທີ່ມີເປີເຊັນຈະມີຄ່າໃນທາງບວກແລະທຽບເທົ່າກັບຂະ ໜາດ ຕົວອັກສອນຂອງພໍ່ແມ່

ກຳ ນົດຂະ ໜາດ ຕົວອັກສອນໃນຮ່າງກາຍ

ການ ກຳ ນົດຂະ ໜາດ ໂຕອັກສອນໃນຮ່າງກາຍແມ່ນວິທີການທີ່ດີທີ່ສຸດໃນການພັດທະນາ ໜ້າ ເວບໄຊທ໌ຕ່າງໆ. ໂດຍການ ກຳ ນົດຂະ ໜາດ ຕົວອັກສອນ ຄຳ ສຳ ຄັນໃນອົງປະກອບຂອງຮ່າງກາຍ, ທ່ານສາມາດ ກຳ ນົດຂະ ໜາດ ຕົວອັກສອນທີ່ກ່ຽວຂ້ອງຢູ່ທົ່ວທຸກບ່ອນໃນ ໜ້າ, ໃຫ້ທ່ານມີຄວາມສາມາດໃນການປັບຂະ ໜາດ ຕົວ ໜັງ ສືໄດ້ງ່າຍຂື້ນຫຼືລົງເທິງ ໜ້າ ທັງ ໝົດ ຕາມຄວາມ ເໝາະ ສົມ.

ຕົວອັກສອນ - ຂະ ໜາດ ເປັນ pixels (Px)

ການ ກຳ ນົດຂະ ໜາດ ໂຕອັກສອນໃນ Pixel ບໍ່ແມ່ນການປະຕິບັດທີ່ດີ. ນີ້ຈະດີເທົ່ານັ້ນຖ້າທ່ານຈັດການກັບການອອກແບບ pixel ທີ່ສົມບູນແບບ.
 Pixel (px) ແມ່ນຄ່າຄົງທີ່, px ແມ່ນໂປຣແກຣມ OS ທີ່ເປັນເອກະລາດແລະຂ້າມຜ່ານບອກຕົວທ່ອງເວັບໃຫ້ຂຽນຕົວອັກສອນຕາມ ຈຳ ນວນ pixels ໃນລະດັບຄວາມສູງທີ່ທ່ານໄດ້ລະບຸ. ຜົນໄດ້ຮັບອາດຈະແຕກຕ່າງກັນເລັກນ້ອຍໃນທົ່ວຕົວທ່ອງເວັບ, ຍ້ອນວ່າທຸກໆ browser ໃຊ້ສູດການຄິດໄລ່ແລະວິທີການທີ່ແຕກຕ່າງກັນເພື່ອບັນລຸຜົນທີ່ຄ້າຍຄືກັນ.
 ເມື່ອທ່ານ ກຳ ນົດຂະ ໜາດ ໂຕອັກສອນເປັນພິກະເຊນ (px), ທ່ານອາດຈະປະເຊີນ ​​ໜ້າ ກັບການຂຽນບາງ css ພິເສດເພື່ອຈັດການ ໜ້າ ທີ່ຕອບສະ ໜອງ. ແລະທ່ານຕ້ອງຂຽນ css ໃນທຸກໆຈຸດພັກຜ່ອນ.

ຕົວອັກສອນ - ຂະ ໜາດ ໃນ EM

ອີກວິທີ ໜຶ່ງ ຂອງການ ກຳ ນົດຂະ ໜາດ ໂຕອັກສອນແມ່ນມີຄ່າ em. ຂະ ໜາດ ຂອງຄ່າ em ແມ່ນເຄື່ອນໄຫວ. ເມື່ອພວກເຮົາ ກຳ ນົດຂະ ໜາດ ຕົວອັກສອນໃນ em ມັນຂື້ນກັບຂະ ໜາດ ຂອງອົງປະກອບພໍ່ແມ່.
 ຖ້າພວກເຮົາບໍ່ໄດ້ ກຳ ນົດຂະ ໜາດ ຕົວອັກສອນ ສຳ ລັບພໍ່ແມ່ຫຼັງຈາກນັ້ນໂດຍຄ່າເລີ່ມຕົ້ນມັນຈະໃຊ້ຂະ ໜາດ ຕົວອັກສອນຂອງຕົວທ່ອງເວັບ, ນັ້ນແມ່ນ 16px.
 ສິ່ງທີ່ ສຳ ຄັນທີ່ສຸດທີ່ຕ້ອງຮູ້ກັບຕົວຈິງແມ່ນ, ມັນຂື້ນຢູ່ກັບຂະ ໜາດ ຕົວອັກສອນຂອງພໍ່ແມ່ຂອງມັນ. ສະນັ້ນຖ້າທ່ານ ກຳ ນົດຕົວອັກສອນທີ່ຢູ່ໃນອົງປະກອບທີ່ຮວບຮວມແລ້ວທ່ານຄວນເກັບໄວ້ໃນໃຈເພື່ອ ກຳ ນົດຂະ ໜາດ ຕົວອັກສອນ.

pixels ລວງເພື່ອ em ການແປງ

ຕົວອັກສອນ - ຂະ ໜາດ ໃນ REM

ຄຸນຄ່າຂອງຕົວ ໜັງ ສືຂະ ໜາດ ໄດ້ຖືກປະດິດຂື້ນເພື່ອເອົາຊະນະບັນຫາຂອງ em ກັບອົງປະກອບຂອງຮັງ.
 ຄ່າ rem-size font ແມ່ນກ່ຽວຂ້ອງກັບຮາກ html, ບໍ່ແມ່ນອົງປະກອບຂອງພໍ່ແມ່, ສ່ວນທີ່ເຫຼືອແມ່ນທຸກຢ່າງຄືກັນກັບ em.
 ຂ້າງລຸ່ມນີ້ແມ່ນຄວາມແຕກຕ່າງລະຫວ່າງ rem ແລະ em ຖ້າມີອົງປະກອບຮັງ.

ຄວາມແຕກຕ່າງລະຫວ່າງອົງປະກອບ Nested ກັບ EM ແລະ REM

Nested Element ກັບ EMNested Element ດ້ວຍ REM

ອ້າງອີງ: https://developer.mozilla.org/en-US/docs/Web