ກໍານົດຄວາມກວ້າງຂອງຫນ້າເວັບຂອງທ່ານ

ສິ່ງທໍາອິດທີ່ນັກອອກແບບສ່ວນໃຫຍ່ພິຈາລະນາໃນການສ້າງຫນ້າເວັບຂອງພວກເຂົາແມ່ນສິ່ງທີ່ ແກ້ໄຂ ເພື່ອອອກແບບ. ສິ່ງນີ້ກໍ່ແມ່ນການຕັດສິນໃຈວ່າການອອກແບບຂອງທ່ານຄວນຈະເປັນແນວໃດ. ບໍ່ມີສິ່ງດັ່ງກ່າວອີກເປັນເວບໄຊທ໌ມາດຕະຖານ.

ເປັນຫຍັງພິຈາລະນາການແກ້ໄຂ

ໃນປີ 1995, ຈໍສະແດງຜົນຄວາມລະອຽດ 640x480 ແມ່ນຈໍທີ່ໃຫຍ່ທີ່ສຸດແລະດີທີ່ສຸດ. ນີ້ຫມາຍຄວາມວ່ານັກອອກແບບເວັບໄຊ້ສຸມໃສ່ການສ້າງຫນ້າທີ່ເບິ່ງດີໃນຕົວທ່ອງເວັບເວັບໄຊຕ໌ທີ່ສູງສຸດກ່ຽວກັບຈໍສະແດງຜົນ 12 ນິ້ວຫາ 14 ນິ້ວຢູ່ທີ່ຄວາມລະອຽດນັ້ນ.

ໃນມື້ນີ້, ຄວາມລະອຽດ 640x480 ເຮັດໃຫ້ຫນ້ອຍກວ່າ 1 ສ່ວນຮ້ອຍຂອງການເຂົ້າຊົມເວັບໄຊທ໌ຫຼາຍທີ່ສຸດ. ປະຊາຊົນໃຊ້ຄອມພິວເຕີທີ່ມີຄວາມລະອຽດສູງກວ່າຫຼາຍລວມທັງ 1366x768, 1600x900 ແລະ 5120x2880. ໃນຫລາຍໆກໍລະນີ, ການອອກແບບສໍາລັບຫນ້າຈໍຄວາມລະອຽດ 1366x768 ເຮັດວຽກ.

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

Browser Width

ກ່ອນທີ່ທ່ານຈະອອກໄປຄິດວ່າ "ແລ້ວ, ຂ້ອຍຈະເຮັດໃຫ້ຫນ້າເວັບ 1366 ພິກະເຊນກວ້າງ," ມີຫຼາຍເລື່ອງນີ້. ຫນຶ່ງມັກຈະເບິ່ງຂ້າມບັນຫາໃນເວລາຕັດສິນຄວາມກວ້າງຂອງຫນ້າເວັບແມ່ນວິທີການໃຫຍ່ຂອງລູກຄ້າຂອງທ່ານຮັກສາຕົວທ່ອງເວັບຂອງພວກເຂົາ. ໂດຍສະເພາະ, ພວກເຂົາເຈົ້າຈະເພີ່ມທະວີການທ່ອງເວັບຂອງພວກເຂົາຂະຫນາດເຕັມຈໍຫຼືເຮັດໃຫ້ພວກມັນຂະຫນາດນ້ອຍກ່ວາຈໍເຕັມ?

ໃນການສໍາຫຼວດແບບບໍ່ເປັນທາງການຂອງຜູ້ຮ່ວມວຽກທີ່ນໍາໃຊ້ເຄື່ອງຄອມພິວເຕີທີ່ມີຄວາມລະອຽດ 1024x768 ມາດຕະຖານ, ທັງສອງໄດ້ຮັກສາຄໍາຮ້ອງສະຫມັກທັງຫມົດຂອງພວກເຂົາສູງສຸດ. ສ່ວນທີ່ເຫຼືອມີປ່ອງຢ້ຽມທີ່ແຕກຕ່າງກັນຂະຫນາດທີ່ເປີດສໍາລັບເຫດຜົນຕ່າງໆ. ນີ້ສະແດງໃຫ້ເຫັນວ່າຖ້າທ່ານກໍາລັງອອກແບບອິນເຕີເນັດຂອງບໍລິສັດນີ້ຢູ່ທີ່ 1024 ພິກະເຊນກວ້າງ, 85% ຂອງຜູ້ໃຊ້ຈະຕ້ອງເລື່ອນພາບຕາມແນວນອນເພື່ອເບິ່ງຫນ້າທັງຫມົດ.

ຫຼັງຈາກທີ່ທ່ານບັນຊີສໍາລັບລູກຄ້າທີ່ເພີ່ມສູງຂຶ້ນຫຼືບໍ່, ຄິດກ່ຽວກັບຂອບຂອງຕົວທ່ອງເວັບ. ທຸກໆຕົວທ່ອງເວັບຂອງເວັບໄຊຕ໌ມີແຖບເລື່ອນແລະຂອບຊາຍແດນທີ່ຫຼຸດລົງພື້ນທີ່ທີ່ມີຢູ່ຈາກ 800 ຫາປະມານ 740 ພິກະເຊນຫຼືນ້ອຍລົງຢູ່ໃນລະດັບຄວາມລະອຽດ 800x600 ແລະປະມານ 980 pixels ໃນປ່ອງຢ້ຽມສູງສຸດທີ່ມີຄວາມລະອຽດ 1024x768. ນີ້ເອີ້ນວ່າ browser "chrome" ແລະມັນສາມາດເອົາໄປຈາກພື້ນທີ່ທີ່ໃຊ້ໄດ້ສໍາລັບການອອກແບບຫນ້າຂອງທ່ານ.

ຫນ້າ Width ຫະລື Fixed Liquid

ຄວາມກວ້າງຈໍານວນຕົວຈິງບໍ່ແມ່ນສິ່ງທີ່ທ່ານຈໍາເປັນຕ້ອງຄິດກ່ຽວກັບເວລາທີ່ອອກແບບຄວາມກວ້າງຂອງເວັບໄຊທ໌ຂອງທ່ານ. ທ່ານຍັງຈໍາເປັນຕ້ອງຕັດສິນໃຈວ່າທ່ານຈະມີ ຄວາມກວ້າງຫຼື width ຂອງແຫຼວ . ໃນຄໍາສັບຕ່າງໆອື່ນ, ທ່ານກໍານົດຄວາມກວ້າງໃຫ້ກັບຈໍານວນສະເພາະໃດຫນຶ່ງ (ຄົງທີ່) ຫຼືເປີເຊັນ (ແຫຼວ)?

Fixed Width

ຫນ້າຄວາມກວ້າງຄົງທີ່ແມ່ນແທ້ຄືພວກເຂົາສຽງ. ຄວາມກວ້າງແມ່ນຖືກກໍານົດຢູ່ໃນຈໍານວນສະເພາະໃດຫນຶ່ງແລະບໍ່ປ່ຽນແປງບໍ່ວ່າບັນດາຕົວທ່ອງເວັບແມ່ນຂະຫນາດໃຫຍ່ຫລືຂະຫນາດນ້ອຍ. ນີ້ອາດຈະດີຖ້າວ່າທ່ານຕ້ອງການການອອກແບບຂອງທ່ານເພື່ອເບິ່ງຄືກັນບໍ່ວ່າບັນດາຕົວທ່ອງເວັບຂອງຜູ້ອ່ານຂອງທ່ານກວ້າງຫຼືແຄບແມ່ນແນວໃດ, ແຕ່ວິທີການນີ້ບໍ່ໄດ້ເອົາໃຈໃສ່ຜູ້ອ່ານຂອງທ່ານ. ປະຊາຊົນທີ່ມີບັນດາຕົວທ່ອງເວັບທີ່ນ້ອຍກວ່າການອອກແບບຂອງທ່ານຈະຕ້ອງເລື່ອນຕາມແນວນອນແລະຜູ້ທີ່ມີຕົວທ່ອງເວັບທີ່ກວ້າງຈະມີພື້ນທີ່ຫວ່າງໃຫຍ່ໆຢູ່ຫນ້າຈໍ.

ເພື່ອສ້າງຫນ້າ widths ຄົງທີ່, ພຽງແຕ່ນໍາໃຊ້ຈໍານວນ pixels ລວງສໍາລັບ width ຂອງຫນ້າຂອງທ່ານ.

Liquid Width

ຫນ້າຄວາມກວ້າງຂອງແຫຼວ (ບາງຄັ້ງເອີ້ນວ່າຫນ້າ width width) ມີຄວາມແຕກຕ່າງກັນຢູ່ໃນຄວາມກວ້າງໂດຍຂຶ້ນຢູ່ກັບຄວາມກວ້າງຂອງປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບ. ນີ້ອະນຸຍາດໃຫ້ທ່ານອອກແບບຫນ້າທີ່ສຸມໃສ່ລູກຄ້າຂອງທ່ານ. ບັນຫາທີ່ມີຫນ້າຄວາມຫນາຂອງແຫຼວແມ່ນວ່າພວກເຂົາສາມາດອ່ານຍາກ. ຖ້າ ຄວາມຍາວ ຂອງເສັ້ນຂອງຂໍ້ຄວາມແມ່ນຍາວກວ່າ 10 ຫາ 12 ຄໍາຫຼືສັ້ນກວ່າ 4 ຫາ 5 ຄໍາ, ມັນອາດຈະຍາກທີ່ຈະອ່ານ. ນີ້ຫມາຍຄວາມວ່າຜູ້ອ່ານທີ່ມີປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບຂະຫນາດໃຫຍ່ຫລືຂະຫນາດນ້ອຍມີບັນຫາ.

ເພື່ອສ້າງຫນ້າ width flexibility, ພຽງແຕ່ໃຊ້ percentages ຫຼື ems ສໍາລັບ width ຂອງຫນ້າເວັບຂອງທ່ານ. ນອກນັ້ນທ່ານຍັງຄວນເຂົ້າໃຈຕົວເອງດ້ວຍຊັບສິນຂອງ CSS ສູງສຸດ. ຄຸນສົມບັດນີ້ອະນຸຍາດໃຫ້ທ່ານຕັ້ງຄ່າຄວາມກວ້າງເປີເຊັນແຕ່ວ່າມັນຈໍາກັດມັນເພື່ອບໍ່ໃຫ້ມັນຂະຫນາດໃຫຍ່ທີ່ຄົນບໍ່ສາມາດອ່ານໄດ້.

ແລະຜູ້ຊະນະແມ່ນ: CSS Media Queries

ການແກ້ໄຂທີ່ດີທີ່ສຸດໃນມື້ນີ້ແມ່ນການນໍາໃຊ້ຄໍາຖາມສື່ CSS ແລະການອອກແບບຕອບຮັບເພື່ອສ້າງຫນ້າທີ່ດັດແປງຄວາມກວ້າງຂອງຕົວທ່ອງເວັບທີ່ເບິ່ງມັນ. ການອອກແບບເວັບຕອບສະຫນອງການນໍາໃຊ້ເນື້ອໃນດຽວກັນເພື່ອສ້າງຫນ້າເວັບທີ່ເຮັດວຽກບໍ່ວ່າທ່ານຈະເບິ່ງມັນຢູ່ທີ່ 5120 ພິກະເຊນກວ້າງຫຼື 320 pixels ກວ້າງ. ຫນ້າທີ່ແຕກຕ່າງກັນເບິ່ງແຕກຕ່າງກັນ, ແຕ່ພວກເຂົາມີເນື້ອໃນດຽວກັນ. ດ້ວຍການສອບຖາມຂອງສື່ໃນ CSS3, ແຕ່ລະອຸປະກອນທີ່ໄດ້ຮັບການຕອບສະຫນອງຄໍາຖາມທີ່ມີຂະຫນາດຂອງມັນ, ແລະແຜ່ນສະໄຕທີ່ປັບຕົວກັບຂະຫນາດນັ້ນ.