ຮຽນຮູ້ວິທີການຕົວທ່ອງເວັບຂອງເວັບກໍານົດການສະແດງໂດຍນໍາໃຊ້ມູນຄ່າສ່ວນຮ້ອຍ
ນັກສຶກສາຈໍານວນຫຼາຍຂອງ ການອອກແບບເວັບຕອບສະຫນອງ ມີເວລາທີ່ມີຄວາມຫຍຸ້ງຍາກການນໍາໃຊ້ອັດຕາສ່ວນສໍາລັບມູນຄ່າ width. ໂດຍສະເພາະແມ່ນ, ມີຄວາມສັບສົນກັບວິທີການຕົວທ່ອງເວັບຂອງການຄິດໄລ່ອັດຕາສ່ວນເຫຼົ່ານັ້ນ. ຂ້າງລຸ່ມນີ້ທ່ານຈະເຫັນຄໍາອະທິບາຍລະອຽດກ່ຽວກັບອັດຕາສ່ວນຮ້ອຍເຮັດວຽກສໍາລັບການຄິດໄລ່ຄວາມກວ້າງໃນເວັບໄຊທ໌ຕອບສະຫນອງ.
ການນໍາໃຊ້ pixels ສໍາລັບມູນຄ່າກວ້າງ
ເມື່ອທ່ານໃຊ້ pixels ເປັນຄ່າ width, ຜົນໄດ້ຮັບແມ່ນງ່າຍດາຍ. ຖ້າທ່ານໃຊ້ CSS ເພື່ອກໍານົດມູນຄ່າ width ຂອງ element ໃນ header ຂອງເອກະສານເປັນ 100 pixels wide, ອົງປະກອບນັ້ນຈະມີຂະຫນາດດຽວກັນກັບວ່າທ່ານກໍານົດເປັນ 100 pixels ໃນເນື້ອໃນຫຼື footer ຂອງເວັບໄຊທ໌ຫຼືເຂດອື່ນຂອງ ຫນ້າ. pixels ແມ່ນມູນຄ່າຢ່າງແທ້ຈິງ, ສະນັ້ນ 100 pixels ແມ່ນ 100 pixels ບໍ່ວ່າບ່ອນທີ່ຢູ່ໃນເອກະສານຂອງທ່ານເປັນອົງປະກອບຈະປາກົດ. ແຕ່ຫນ້າເສຍດາຍ, ໃນຂະນະທີ່ມູນຄ່າ pixels ລວງແມ່ນງ່າຍທີ່ຈະເຂົ້າໃຈ, ພວກເຂົາບໍ່ໄດ້ເຮັດວຽກດີໃນເວັບໄຊທ໌ທີ່ຕອບສະຫນອງ.
Ethan Marcotte ສ້າງຄໍາສັບ "ການອອກແບບເວັບໄຊຕ໌ຕອບສະຫນອງ", ອະທິບາຍວິທີການນີ້ມີບັນດາຜູ້ນໍາທີ່ສໍາຄັນ 3 ຄົນ:
- ຕາຂ່າຍໄຟຟ້າ
- ສື່ມວນຊົນຂອງແຫຼວ
- Media queries
ບັນດາຜູ້ທີ່ມີສອງຈຸດທໍາອິດ, ຕາຂ່າຍໄຟຟ້າແລະສື່ນ້ໍາ, ແມ່ນບັນລຸໄດ້ໂດຍນໍາໃຊ້ອັດຕາສ່ວນ, ແທນທີ່ຈະ pixels, ສໍາລັບການວັດແທກຄຸນຄ່າ.
ການໃຊ້ເປີເຊັນສໍາລັບມູນຄ່າກວ້າງ
ເມື່ອທ່ານໃຊ້ສ່ວນຮ້ອຍເພື່ອສ້າງຄວາມກວ້າງສໍາລັບອົງປະກອບ, ຂະຫນາດຈິງທີ່ອົງປະກອບທີ່ສະແດງຢູ່ຈະແຕກຕ່າງກັນໄປຕາມບ່ອນທີ່ຢູ່ໃນເອກະສານ. ເປີເຊັນແມ່ນມູນຄ່າທີ່ທຽບເທົ່າ, ຊຶ່ງຫມາຍຄວາມວ່າຂະຫນາດທີ່ສະແດງມີຄວາມກ່ຽວຂ້ອງກັບອົງປະກອບອື່ນໆໃນເອກະສານຂອງທ່ານ.
ຕົວຢ່າງ, ຖ້າທ່ານກໍານົດຄວາມກວ້າງຂອງ ຮູບພາບ ເປັນ 50%, ນີ້ ບໍ່ໄດ້ ຫມາຍຄວາມວ່າຮູບພາບຈະສະແດງຢູ່ເຄິ່ງຫນຶ່ງຂອງຂະຫນາດປົກກະຕິຂອງມັນ. ນີ້ແມ່ນຄວາມເຂົ້າໃຈຜິດທົ່ວໄປ.
ຖ້າຫາກວ່າຮູບພາບເປັນພື້ນຖານ 600 ພິກະເຊນກວ້າງ, ຫຼັງຈາກນັ້ນການນໍາໃຊ້ມູນຄ່າ CSS ເພື່ອສະແດງໃຫ້ເຫັນມັນຢູ່ 50% ບໍ່ໄດ້ຫມາຍຄວາມວ່າມັນຈະມີຄວາມກວ້າງ 300 pixels ໃນຕົວທ່ອງເວັບ. ມູນຄ່າອັດຕາສ່ວນນີ້ແມ່ນຄິດໄລ່ໂດຍອີງໃສ່ອົງປະກອບທີ່ປະກອບດ້ວຍຮູບພາບນັ້ນ, ບໍ່ແມ່ນຂະຫນາດພື້ນເມືອງຂອງຕົວມັນເອງ. ຖ້າບ່ອນເກັບມ້ຽນ (ຊຶ່ງສາມາດເປັນສ່ວນຫນຶ່ງຫລືບາງອົງປະກອບ HTML ອື່ນໆ) ກວ້າງ 1000 pixels, ຫຼັງຈາກນັ້ນຮູບພາບຈະສະແດງຢູ່ 500 pixels ນັບຕັ້ງແຕ່ມູນຄ່ານັ້ນແມ່ນ 50% ຂອງຄວາມກວ້າງຂອງຖັງ. ຖ້າອົງປະກອບທີ່ປະກອບມີ 400 pixels ກວ້າງ, ຫຼັງຈາກນັ້ນຮູບພາບຈະສະແດງຢູ່ທີ່ 200 pixels, ເນື່ອງຈາກວ່າມູນຄ່ານັ້ນແມ່ນ 50% ຂອງບັນຈຸ. ຮູບພາບທີ່ມີຄໍາຖາມຢູ່ນີ້ມີຂະຫນາດ 50% ເຊິ່ງຂຶ້ນຢູ່ກັບອົງປະກອບທີ່ມີມັນ.
ຈືຂໍ້ມູນການ, ການອອກແບບຕອບສະຫນອງແມ່ນນ້ໍາ. ຮູບແບບແລະຂະຫນາດຈະປ່ຽນແປງເມື່ອ ຂະຫນາດ / ອຸປະກອນຈໍລະບົບປ່ຽນແປງ . ຖ້າທ່ານຄິດກ່ຽວກັບເລື່ອງນີ້ໃນເງື່ອນໄຂທາງດ້ານຮ່າງກາຍ, ບໍ່ແມ່ນເວັບ, ມັນກໍ່ຄ້າຍກັບມີກ່ອງກະດາດທີ່ທ່ານກໍາລັງເຕັມໄປດ້ວຍອຸປະກອນການຫຸ້ມຫໍ່. ຖ້າທ່ານເວົ້າວ່າກ່ອງຄວນຈະເຄືອບເຕັມໄປດ້ວຍອຸປະກອນນັ້ນ, ຈໍານວນການຫຸ້ມຫໍ່ທີ່ທ່ານຕ້ອງການຈະແຕກຕ່າງກັນໄປຕາມຂະຫນາດຂອງກ່ອງ. ດຽວກັນນີ້ຖືເປັນຄວາມຈິງສໍາລັບຄວາມກວ້າງຂອງສ່ວນຮ້ອຍໃນການອອກແບບເວັບໄຊຕ໌.
ເປີເຊັນອີງໃສ່ອັດຕາສ່ວນອື່ນໆ
ໃນຮູບພາບ / ຕົວຢ່າງຂອງຖັງ, ຂ້ອຍໄດ້ໃຊ້ຄ່າ pixels ສໍາລັບອົງປະກອບທີ່ມີຢູ່ເພື່ອສະແດງວິທີການສະແດງພາບທີ່ຕອບສະຫນອງ. ໃນຄວາມເປັນຈິງແລ້ວ, ອົງປະກອບທີ່ມີສ່ວນປະກອບຍັງຈະຖືກກໍານົດເປັນອັດຕາສ່ວນແລະຮູບພາບ, ຫຼືອົງປະກອບອື່ນໆ, ພາຍໃນຖາດນັ້ນຈະໄດ້ຮັບມູນຄ່າຂອງພວກມັນໂດຍອີງໃສ່ເປີເຊັນຂອງເປີເຊັນ.
ນີ້ແມ່ນຕົວຢ່າງອື່ນທີ່ສະແດງໃຫ້ເຫັນນີ້ໃນການປະຕິບັດ.
ບອກວ່າທ່ານມີເວັບໄຊທ໌ທີ່ມີເວັບໄຊທ໌ທັງຫມົດທີ່ຢູ່ພາຍໃນຫ້ອງການທີ່ມີ "ຫ້ອງ" (ປະເພດການອອກແບບເວັບທົ່ວໄປ). ພາຍໃນພະແນກນັ້ນແມ່ນສາມພະແນກອື່ນໆທີ່ທ່ານໃນທີ່ສຸດຈະສະໄຕທີ່ຈະສະແດງເປັນ 3 ຄໍລໍາຕັ້ງຢູ່. HTML ທີ່ເບິ່ງຄືວ່ານີ້:
ໃນປັດຈຸບັນ, ທ່ານອາດຈະໃຊ້ CSS ເພື່ອກໍານົດຂະຫນາດຂອງ "ບ່ອນເກັບມ້ຽນ" ທີ່ກ່າວວ່າ 90%. ໃນຕົວຢ່າງນີ້, ພາຫະນະຖັງບໍ່ມີອົງປະກອບອື່ນທີ່ລ້ອມຮອບມັນນອກຈາກຮ່າງກາຍ, ທີ່ພວກເຮົາບໍ່ໄດ້ກໍານົດຄ່າໃດໆ. ໂດຍຄ່າເລີ່ມຕົ້ນ, ຮ່າງກາຍຈະເຮັດໃຫ້ເປັນ 100% ຂອງປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບ. ດັ່ງນັ້ນ, ອັດຕາສ່ວນຂອງ "ຖັງ" ສ່ວນແບ່ງຈະອີງໃສ່ຂະຫນາດຂອງປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບ. ໃນຂະນະທີ່ປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບປ່ຽນແປງໃນຂະຫນາດ, ດັ່ງນັ້ນຂະຫນາດຂອງ "ບັນຈຸ" ນີ້. ດັ່ງນັ້ນ, ຖ້າປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບແມ່ນ 2000 pixels ກວ້າງ, ພາກນີ້ຈະສະແດງຢູ່ 1800 pixels. ນີ້ຖືກຄິດໄລ່ເປັນ 90 ສ່ວນຮ້ອຍຂອງ 2000 (2000 x .90 = 1800)), ເຊິ່ງແມ່ນຂະຫນາດຂອງຕົວທ່ອງເວັບ.
ຖ້າຫາກວ່າແຕ່ລະສ່ວນຫນຶ່ງຂອງ "div" ທີ່ພົບໃນ "container" ຖືກກໍານົດເປັນຂະຫນາດ 30%, ຫຼັງຈາກນັ້ນແຕ່ລະຄົນຈະກວ້າງ 540 ພິກະເຊນໃນຕົວຢ່າງນີ້. ນີ້ຖືກຄິດໄລ່ເປັນ 30% ຂອງ 1800 pixels ທີ່ບັນຈຸຢູ່ໃນ (1800 x 30 = 540). ຖ້າພວກເຮົາປ່ຽນເປີເຊັນຂອງຖັງນັ້ນ, ພາກສ່ວນພາຍໃນເຫຼົ່ານີ້ກໍ່ຈະປ່ຽນແປງໃນຂະຫນາດທີ່ພວກມັນເຮັດຍ້ອນວ່າພວກເຂົາແມ່ນຂຶ້ນກັບວ່າມີອົງປະກອບ.
ໃຫ້ສົມມຸດວ່າປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບຍັງມີຄວາມກວ້າງ 2000 pixels, ແຕ່ວ່າພວກເຮົາປ່ຽນມູນຄ່າເປີເຊັນຂອງ 80% ແທນ 80%. ນັ້ນຫມາຍຄວາມວ່າມັນຈະເຮັດໃຫ້ມີຄວາມກວ້າງ 1600 ຈຸດໃນປັດຈຸບັນ (2000 x .80 = 1600). ເຖິງແມ່ນວ່າພວກເຮົາບໍ່ປ່ຽນ CSS ສໍາລັບຂະຫນາດຂອງ 3 "col" ຂອງພວກເຮົາ, ແລະປ່ອຍໃຫ້ພວກເຂົາຢູ່ 30%, ພວກເຂົາຈະເຮັດໃຫ້ແຕກຕ່າງກັນໃນປັດຈຸບັນເນື່ອງຈາກວ່າອົງປະກອບຂອງມັນທີ່ມີເນື້ອຫາທີ່ພວກເຂົາຖືກຂະຫນາດໂດຍມີການປ່ຽນແປງ. ຂະແຫນງການເຫຼົ່ານີ້ 3 ຈະແບ່ງເປັນ 480 ພິກະເຊນ, ເຊິ່ງເປັນ 30% ຂອງ 1600, ຫຼືຂະຫນາດຂອງຖັງ (1600 x 30 = 480).
ຖ້າຫາກວ່າມີຮູບພາບຢູ່ໃນສ່ວນຫນຶ່ງຂອງຂະແຫນງ "col" ເຫຼົ່ານີ້ແລະຮູບພາບທີ່ຖືກຂະຫນາດໂດຍໃຊ້ເປີເຊັນ, ສະພາບການຂະຫນາດຂອງມັນຈະເປັນ "ຄໍ" ຕົວຂອງມັນເອງ. ເມື່ອວ່າຂະແຫນງ "col" ມີການປ່ຽນແປງໃນຂະຫນາດ, ດັ່ງນັ້ນຮູບພາບພາຍໃນມັນກໍ່ຈະປ່ຽນແປງ. ດັ່ງນັ້ນຖ້າຂະຫນາດຂອງຕົວທ່ອງເວັບຫຼື "ບັນຈຸມີ" ປ່ຽນແປງ, ມັນຈະສົ່ງຜົນກະທົບຕໍ່ສາມສ່ວນ "ຄໍ", ຊຶ່ງຈະປ່ຽນຂະຫນາດຂອງພາບພາຍໃນ "ຄໍ". ດັ່ງທີ່ທ່ານສາມາດເຫັນໄດ້, ມັນມາເຖິງມູນຄ່າການກໍານົດອັດຕາສ່ວນຮ້ອຍລະ.
ເມື່ອທ່ານພິຈາລະນາວ່າອົງປະກອບພາຍໃນຂອງຫນ້າເວັບຈະເຮັດຫຍັງເມື່ອມີມູນຄ່າເປີເຊັນທີ່ຖືກນໍາໃຊ້ສໍາລັບຄວາມກວ້າງຂອງມັນ, ທ່ານຈໍາເປັນຕ້ອງເຂົ້າໃຈເຖິງສະພາບການທີ່ອົງປະກອບນັ້ນຢູ່ໃນການຫມາຍຂອງຫນ້າ.
ໃນການສະຫຼຸບ
ອັດຕາສ່ວນມີບົດບາດສໍາຄັນໃນການສ້າງຮູບແບບສໍາລັບ ເວັບໄຊທ໌ຕອບສະຫນອງ . ບໍ່ວ່າທ່ານກໍາລັງຂະຫນາດຂອງຮູບພາບທີ່ຕອບສະຫນອງຫຼືໃຊ້ຄວາມກວ້າງເປີເຊັນເພື່ອເຮັດໃຫ້ຕາຂ່າຍໄຟຟ້າທີ່ແທ້ຈິງທີ່ມີຂະຫນາດທີ່ກ່ຽວຂ້ອງກັບກັນແລະກັນ, ການເຂົ້າໃຈການຄິດໄລ່ເຫຼົ່ານີ້ຈະເປັນສິ່ງຈໍາເປັນເພື່ອບັນລຸເປົ້າຫມາຍທີ່ທ່ານຕ້ອງການ.