ສ້າງເວັບໄຊທ໌ຕອບສະ ໜອງ ໃນ ໜຶ່ງ ອາທິດ: ການສອບຖາມສື່ (ພາກທີ 4)

ເນື້ອຫາ

• 01. ການເພີ່ມ ຄຳ ຖາມກ່ຽວກັບສື່
• 02. ການວິພາກຂອງ ຄຳ ຖາມກ່ຽວກັບສື່
• 03. ມີສິ່ງ ໜຶ່ງ ອີກ…
• 04. ການເລືອກຈຸດແຍກ
• 05. ການປັບຮູບຫຍໍ້ຂອງພວກເຮົາ
• 06. ບໍ່ພຽງແຕ່ຄວາມກວ້າງເທົ່ານັ້ນ

• ຄວາມຮູ້ທີ່ຕ້ອງການ: CSS ແລະ HTML ລະດັບປານກາງ
• ຕ້ອງການ: ບັນນາທິການຕົວ ໜັງ ສື, ໂປແກຼມທ່ອງເວັບທີ່ທັນສະ ໄໝ, ໂປແກຼມກາຟິກ
• ເວລາຂອງໂຄງການ: 1 ຊົ່ວໂມງ (ລວມທັງ ໝົດ 5 ຊົ່ວໂມງ)
• ເອກະສານສະ ໜັບ ສະ ໜູນ

ພາກສ່ວນທີ່ຂ້ອນຂ້າງ ໃໝ່ ຂອງການລະບຸ CSS, ການສອບຖາມສື່ແມ່ນແນ່ນອນວ່າມັນເປັນລັກສະນະທີ່ ໜ້າ ຕື່ນເຕັ້ນທີ່ສຸດຂອງການອອກແບບເວັບທີ່ຕອບສະ ໜອງ ແລະເປັນພື້ນທີ່ທີ່ສຸກແລ້ວ ສຳ ລັບການທົດລອງຕໍ່ໄປ.

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

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

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

01. ການເພີ່ມ ຄຳ ຖາມກ່ຽວກັບສື່

ໂດຍມີສ່ວນປະກອບຕ່າງໆໃນຮູບແບບຂອງພວກເຮົາ ສຳ ເລັດແລະເຮັດວຽກຢູ່ຂ້າງນອກຂອງຮູບແບບໃດກໍ່ຕາມ, ມັນແມ່ນເວລາທີ່ຈະຍ້າຍພວກມັນເຂົ້າໃນ ໜ້າ ຕ່າງຕ່າງໆທີ່ສ້າງເວັບໄຊຂອງພວກເຮົາ.

ພວກເຮົາຈະເລີ່ມຕົ້ນກັບ ໜ້າ ທຳ ອິດຂອງພວກເຮົາ. ຈາກການອອກແບບທີ່ມີຮູບແບບໃນ desktop, ພວກເຮົາສາມາດເຫັນໄດ້ວ່າໃນມຸມມອງທີ່ກວ້າງຂວາງການຈັດວາງຂອງພວກເຮົາຄວນປາກົດເປັນດັ່ງຕໍ່ໄປນີ້:

ການປະຕິບັດການວັດແທກຈາກການອອກແບບຂອງພວກເຮົາ, ພວກເຮົາສາມາດອະທິບາຍພື້ນທີ່ຂອງເອກະສານໃນ CSS ດັ່ງຕໍ່ໄປນີ້:

ເອກະສານ {
ແຜ່ນຮອງ: 0 5%;
}
. {
ຄວາມກວ້າງ: 74.242424242424%; / * 784/1056 * /
float: left;
}
ພາກປະຕິບັດ {
ຄວາມກວ້າງ: 22.727272727273%; / * 240/1056 * /
float: right;
}

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

(ເປົ້າ ໝາຍ / ສະພາບການ) * 100 = ຜົນ

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

ນີ້ແມ່ນບ່ອນທີ່ການສອບຖາມກ່ຽວກັບສື່ຕ່າງໆເຂົ້າມາ. ສົມມຸດວ່າຮູບແບບນີ້ຄວນຈະມີຜົນໃນເວລາທີ່ browser ມີຄວາມກວ້າງກວ່າ 768px, ພວກເຮົາສາມາດເພີ່ມ CSS ຕໍ່ໄປນີ້:

ເອກະສານ {
ແຜ່ນຮອງ: 0 5%;
}
ໜ້າ ຈໍ @media ແລະ (min-width: 768px) {
. {
ຄວາມກວ້າງ: 74.242424242424%; / * 784/1056 * /
float: left;
}
ພາກປະຕິບັດ {
ຄວາມກວ້າງ: 22.727272727273%; / * 240/1056 * /
float: right;
}
}

ໃນປັດຈຸບັນ, ເມື່ອເວບໄຊທ໌ແຄບແຄບກວ່າ 768px, ທຸກສິ່ງທຸກຢ່າງພາຍໃນການສອບຖາມສື່ຈະຖືກລະເວັ້ນ. ມັນຈະຖືກລະເວັ້ນໂດຍໂປແກຼມທ່ອງເວັບໃດໆທີ່ບໍ່ສະ ໜັບ ສະ ໜູນ ການສອບຖາມກ່ຽວກັບສື່ເຊັ່ນກັນ.

02. ການວິພາກຂອງ ຄຳ ຖາມກ່ຽວກັບສື່

ເພື່ອເຂົ້າໃຈສິ່ງທີ່ ກຳ ລັງເກີດຂື້ນຢູ່ນີ້, ໃຫ້ເບິ່ງວິທີການສອບຖາມກ່ຽວກັບການສ້າງສື່. ພວກເຮົາສາມາດແບ່ງອອກເປັນສອງສ່ວນຄື:

• ໜ້າ ຈໍ @media: ພາກ ທຳ ອິດຂອງການສອບຖາມກ່ຽວກັບສື່ແມ່ນ ໜັງ ສືມໍລະດົກ ປະເພດສື່ມວນຊົນ. ທ່ານອາດຈະຮູ້ເຖິງໄວຍະກອນນີ້ຖ້າທ່ານເຄີຍໃສ່ແບບພິມໃນ CSS ຂອງທ່ານ. ນອກນັ້ນທ່ານຍັງອາດຈະຮັບຮູ້ຊື່ປະເພດຈາກ ສື່ມວນຊົນ ຄຸນລັກສະນະຂອງ link> ອົງປະກອບ. ນັ້ນແມ່ນຍ້ອນວ່າທັງສອງຍອມຮັບເອົາປະເພດສື່ທີ່ຖືກອະນຸມັດທີ່ພົບໃນ CSS 2.1.
• (min-width: 768px): ພາກສ່ວນທີສອງແມ່ນ ສອບຖາມ. ນີ້ປະກອບມີ ຄຸນ​ນະ​ສົມ​ບັດ ທີ່ຈະຖືກສອບຖາມ (ໃນກໍລະນີນີ້ແມ່ນຄວາມກວ້າງຂອງຕໍາ່ສຸດທີ່ຂອງມຸມມອງ) ແລະກົງກັນ ມູນຄ່າ ເພື່ອທົດສອບ (768px).

ເມື່ອພວກເຮົາສົນທະນາກ່ຽວກັບການອອກແບບເວັບທີ່ຕອບສະ ໜອງ, ມີແນວໂນ້ມທີ່ຈະສຸມໃສ່ຄວາມກວ້າງ, ແຕ່ວ່າມັນມີລັກສະນະອື່ນໆທີ່ພວກເຮົາສາມາດທົດສອບໄດ້ເຊັ່ນກັນ:

• (min- | ສູງສຸດ -) ຄວາມກວ້າງ ແລະ (min- | ສູງສຸດ -) ຄວາມສູງ: ສິ່ງເຫຼົ່ານີ້ຊ່ວຍໃຫ້ພວກເຮົາສອບຖາມຄວາມກວ້າງແລະຄວາມສູງຂອງມຸມມອງຂອງມຸມມອງ (ເຊັ່ນປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບ).
• (min- | max-) ຄວາມກວ້າງຂອງອຸປະກອນ ແລະ (min- | ສູງສຸດ -) - ລະດັບຄວາມສູງຂອງອຸປະກອນ: ສິ່ງເຫຼົ່ານີ້ຊ່ວຍໃຫ້ພວກເຮົາສອບຖາມຄວາມກວ້າງຂອງ ໜ້າ ຈໍທັງ ໝົດ. ໃນປະສົບການຂອງຂ້ອຍ, ມັນມັກຈະມີຄວາມຮູ້ສຶກທີ່ ເໝາະ ສົມກັບການວາງພື້ນຖານເທິງ ໜ້າ ຈໍເບິ່ງຫຼາຍກວ່າການສະແດງ.
• ປະຖົມນິເທດ: ທ່ານທັນທີສາມາດຄິດເຖິງຄວາມເປັນໄປໄດ້ທີ່ນີ້; ຄິດເຖິງແອັບ apps ທີ່ສະແດງເນື້ອຫາທີ່ແຕກຕ່າງກັນໂດຍອີງໃສ່ແນວທາງຂອງໂທລະສັບຂອງທ່ານ - ມັນກໍ່ເປັນໄປໄດ້ຢູ່ໃນເວັບ.
• (min- | ສູງສຸດ -) ອັດຕາສ່ວນ: ນີ້ອະນຸຍາດໃຫ້ພວກເຮົາປັບຮູບແບບໂດຍອີງໃສ່ອັດຕາສ່ວນຂອງ ໜ້າ ຕ່າງຂອງ browser …
• (min- | ສູງສຸດທີ່ເຄຍ) …ແລະສິ່ງນີ້ຊ່ວຍໃຫ້ພວກເຮົາເຮັດແບບດຽວກັນໂດຍອີງໃສ່ອັດຕາສ່ວນຂອງອຸປະກອນ. Owen Gregory ໄດ້ຂຽນບົດຄວາມທີ່ຍອດຢ້ຽມໃນປີກາຍນີ້ເຊິ່ງໄດ້ຄົ້ນຫາວິທີທີ່ພວກເຮົາສາມາດໃຊ້ແບບສອບຖາມນີ້ເພື່ອຖີ້ມການອອກແບບຂອງພວກເຮົາກັບອຸປະກອນທີ່ພວກມັນປາກົດ.
• (min- | max-) monochrome: ພວກເຮົາຍັງສາມາດທົດສອບໄດ້ວ່າອຸປະກອນໃດ ໜຶ່ງ ມີຈໍສະແດງຜົນ monochrome ຫຼືບໍ່. ລອງນຶກພາບເບິ່ງວ່າມັນຈະມີປະໂຫຍດຫຼາຍປານໃດຖ້າອຸປະກອນອີເລັກໂຕຼນິກ Kindle ຂອງ Amazon ບໍ່ຕົວະແລະລາຍງານວ່າ ໜ້າ ຈໍຂອງມັນເປັນສີ!

ພາກສ່ວນສຸດທ້າຍຂອງການສອບຖາມຂອງພວກເຮົາແມ່ນເປັນໄປໄດ້ທີ່ເປັນປະໂຫຍດທີ່ສຸດ. ໂດຍການ ນຳ ໃຊ້ ແລະ, ພວກເຮົາສາມາດທົດສອບຄຸນລັກສະນະຫຼາຍຢ່າງໃນແບບສອບຖາມດຽວ. ຍົກ​ຕົວ​ຢ່າງ:

ໜ້າ ຈໍ @media ແລະ (min-width: 768px) ແລະ (ທິດທາງ: ພູມສັນຖານ) {
...
}

ຕາມທີ່ທ່ານເຫັນ, ການສອບຖາມກ່ຽວກັບສື່ສາມາດຊ່ວຍພວກເຮົາສ້າງປະສົບການທີ່ ໜ້າ ສົນໃຈ - ແລະຂ້ອຍໄດ້ ສຳ ຜັດກັບ ໜ້າ ດິນເທົ່ານັ້ນ. ຖ້າທ່ານ ກຳ ລັງຊອກຫາການອ່ານໃນເວລານອນທີ່ມີແສງສະຫວ່າງ, ທ່ານອາດຈະເຮັດສິ່ງທີ່ບໍ່ດີກວ່າການອ່ານສະເພາະຂອງການສອບຖາມສື່ W3C ເຊິ່ງອະທິບາຍເຖິງລັກສະນະທັງ ໝົດ ທີ່ພວກເຮົາສາມາດທົດສອບໄດ້.

03. ມີສິ່ງ ໜຶ່ງ ອີກ…

ເຖິງແມ່ນວ່າພວກເຮົາໄດ້ລວມເອົາການສອບຖາມກ່ຽວກັບສື່ຕ່າງໆໃນ CSS ຂອງພວກເຮົາ, ຖ້າພວກເຮົາເບິ່ງເວັບໄຊທ໌ຂອງພວກເຮົາໃນອຸປະກອນມືຖື, ທ່ານຈະສັງເກດເຫັນວ່າເວັບໄຊທ໌້ຂອງພວກເຮົາຍັງຖືກຈັດສົ່ງໃຫ້ຄືກັບວ່າຈໍສະແດງຜົນກວ້າງກວ່າ 768px.

ເພື່ອເຂົ້າໃຈວ່າເປັນຫຍັງເຫດການນີ້ເກີດຂື້ນ, ພວກເຮົາຕ້ອງໄດ້ຖອດຖອນບົດຮຽນປະຫວັດສາດໂດຍຫຍໍ້.

ເມື່ອ iPhone ຕົ້ນສະບັບຖືກປະກາດໃນປີ 2007, ໜຶ່ງ ໃນຈຸດຂາຍໃຫຍ່ຂອງມັນແມ່ນຄວາມສາມາດໃນການຄົ້ນຫາ 'ເວັບໄຊທ໌ທີ່ແທ້ຈິງ', ເຖິງແມ່ນວ່າມັນຈະ ໝາຍ ຄວາມວ່າເວັບໄຊທ໌ທີ່ຕັ້ງ ໜ້າ ຈໍແບບຕັ້ງໂຕະເທົ່ານັ້ນທີ່ ຈຳ ເປັນຕ້ອງຖືກທັບລົງເພື່ອໃຫ້ພໍດີກັບ ໜ້າ ຈໍຂະ ໜາດ ນ້ອຍຂອງມັນ. iPhone ສາມາດເຮັດໄດ້ໂດຍການລາຍງານການສະແດງຂອງມັນວ່າມີຄວາມກວ້າງ 980px, ກ່ອນທີ່ຈະຂະຫຍາຍ ໜ້າ ເວັບລົງເພື່ອໃຫ້ພໍດີກັບ ໜ້າ ຈໍກວ້າງ 320px.

ແຕ່ iPhone ໄດ້ຖືກ ນຳ ສະ ເໜີ ກ່ອນການອອກແບບທີ່ຕອບສະ ໜອງ. ຕອນນີ້ຜູ້ຂຽນ ກຳ ລັງອອກແບບເວັບໄຊທີ່ອອກແບບມາ ສຳ ລັບມືຖື, ຄຸນລັກສະນະນີ້ບໍ່ມີປະໂຫຍດຫຍັງເລີຍ. ໂຊກດີ, Apple ໄດ້ລວມເອົາວິທີການຂ້າມຜ່ານພຶດຕິ ກຳ ນີ້, ແລະເນື່ອງຈາກມັນໄດ້ຮັບຮອງເອົາຈາກໂຮງງານຜະລິດອື່ນໆ, ມັນໄດ້ກາຍມາເປັນເກືອບ de facto ມາດຕະຖານ. ມັນກ່ຽວຂ້ອງກັບການເພີ່ມ ຄຳ ດຽວ meta ອົງປະກອບຂອງເຄື່ອງ ໝາຍ ຂອງພວກເຮົາ:

ຊື່ meta = "ມຸມມອງ" ເນື້ອໃນ = "ຂະ ໜາດ ເລີ່ມຕົ້ນ = 1.0, ຄວາມກວ້າງ = ຄວາມກວ້າງຂອງອຸປະກອນ" />

ນີ້ບອກຕົວທ່ອງເວັບທີ່ມີຄວາມຮູ້ກ່ຽວກັບມຸມມອງວ່າເວັບໄຊທ໌ບໍ່ຄວນຖືກຂະຫຍາຍລົງ, ແລະວ່າຄວາມກວ້າງຂອງ ໜ້າ ຕ່າງຂອງ browser ຄວນຖືກປະຕິບັດຄືກັນກັບຄວາມກວ້າງຂອງອຸປະກອນໂດຍລວມ. ເມື່ອພວກເຮົາໄດ້ເພີ່ມແຖວນີ້, ເວບໄຊທ໌ຂອງພວກເຮົາຈະປະກົດຂຶ້ນດ້ວຍຮູບແບບທີ່ຕັ້ງໄວ້:

04. ການເລືອກຈຸດແຍກ

ໃຫ້ກັບໄປສອບຖາມສື່ຂອງພວກເຮົາ:

ໜ້າ ຈໍ @media ແລະ (min-width: 768px) {
...
}

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

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

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

ໃນຂະນະທີ່ການອອກແບບຂອງພວກເຮົາອາດຈະສະແດງໃຫ້ເຫັນບາງຈຸດກ່ຽວກັບຈຸດຢຸດທີ່ເປັນໄປໄດ້, ວິທີການທີ່ດີທີ່ສຸດໃນການເລືອກພວກມັນແມ່ນຜ່ານການທົດລອງ. ໂດຍການດັດປັບຄວາມກວ້າງຂອງ ໜ້າ ຕ່າງ browser, ຂ້ອຍໄດ້ຕັດສິນໃຈວ່າ 800px ແມ່ນຄວາມກວ້າງທີ່ດີທີ່ຈະປ່ຽນເປັນຮູບແບບທີ່ສັບສົນກວ່າເກົ່າ.

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

800 / 16 = 50

ດຽວນີ້ພວກເຮົາສາມາດອັບເດດ ຄຳ ຖາມສື່ຂອງພວກເຮົາໄດ້ດັ່ງນີ້:

ໜ້າ ຈໍ @media ແລະ (min-width: 50em) {/ * 800px * /
...
}

05. ການປັບຮູບຫຍໍ້ຂອງພວກເຮົາ

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

ນີ້ແມ່ນ CSS ຕົ້ນສະບັບຂອງພວກເຮົາ:

ol.media li.media-item {
ພື້ນຫລັງສີ: #fff;
ຂອບ: 0 4.16666666667% 4.16666666667% 0;
ຄວາມກວ້າງ: 47.91666666667%;
float: left;
}
ol.media li.media-item: nth-ເດັກ (2n) {
ຂອບຂວາ: 0;
}

ຈຸດທີ່ພື້ນທີ່ສີຂາວນີ້ປະກົດຂື້ນຄືກັບວ່າຕົວທ່ອງເວັບຂະຫຍາຍກວ້າງກ່ວາ 560px.ພວກເຮົາຈະເລືອກຄ່ານີ້ທີ່ຈະແລກປ່ຽນກັບການສະແດງສາມຮູບຫຍໍ້ຕໍ່ແຖວ. ພວກເຮົາສາມາດເຮັດໄດ້ໂດຍການເພີ່ມ CSS ຕໍ່ໄປນີ້:

ໜ້າ ຈໍ @media ແລະ (min-width: 35em) {
.media-item {
ຄວາມກວ້າງ: 30.612244897959%; / * 240/784 * /
ຂອບ: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
ຂອບຂວາ: 0;
}
}

ໃຫ້ສັງເກດວ່າພວກເຮົາບໍ່ ຈຳ ເປັນຕ້ອງຂຽນຄືນ ໃໝ່ ທຸກໆຮູບແບບທີ່ ຈຳ ເປັນ ສຳ ລັບຮູບຫຍໍ້ທີ່ຢູ່ໃນການສອບຖາມສື່ນີ້, ມີພຽງແຕ່ພາກສ່ວນທີ່ພວກເຮົາຕ້ອງການປັບ.

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

ol.media li.media-item: nth-ເດັກ (2n) {
ຂອບຂວາ: 0;
}

ພວກເຮົາ ຈຳ ເປັນຕ້ອງປັບປ່ຽນ CSS ພາຍໃນ ຄຳ ຖາມສື່ຂອງພວກເຮົາເພື່ອ ກຳ ນົດຄ່ານັ້ນ:

ໜ້າ ຈໍ @media ແລະ (min-width: 35em) {
.media-item {
ຄວາມກວ້າງ: 30.612244897959%; / * 240/784 * /
ຂອບ: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
ຂອບດ້ານຂວາ: 4.081632653061%;
}
.media-item: nth-child (3n) {
ຂອບຂວາ: 0;
}
}

ເມື່ອສ້າງແບບສອບຖາມກ່ຽວກັບສື່, ໃຫ້ຮູ້ສະເຫມີກ່ຽວກັບບັນຫາມໍລະດົກເຊັ່ນນີ້.

06. ບໍ່ພຽງແຕ່ຄວາມກວ້າງເທົ່ານັ້ນ

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

.media-object-wrapper {
padding-bottom: 56.25%;
ຄວາມກວ້າງ: 100%;
ລະດັບຄວາມສູງ: 0;
ຕຳ ແໜ່ງ: ພີ່ນ້ອງ;
}
ໜ້າ ຈໍ @media ແລະ (ສູງສຸດສູງສຸດ: 35em) ແລະ (ແນວທາງ: ພູມສັນຖານ) {/ * 560px * /
.media-object-wrapper {
ຄວາມກວ້າງ: 60%;
padding-bottom: 33,75%;
}
}

ຂ້າພະເຈົ້າຍັງໄດ້ລວມເອົາ ຄຳ ຖາມກ່ຽວກັບການ ກຳ ນົດທິດທາງໃຫ້ ເໝາະ ສົມກັບພຶດຕິ ກຳ ນີ້ຕື່ມອີກ.

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

• ເບິ່ງ ໜ້າ ທຳ ອິດຂອງພວກເຮົາທີ່ຕອບສະ ໜອງ
• ເບິ່ງ ໜ້າ ລາຍການສື່ທີ່ຕອບສະ ໜອງ ຂອງພວກເຮົາ

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

ມື້ອື່ນ: ໃນພາກສຸດທ້າຍຂອງບົດສອນນີ້, ພວກເຮົາຈະໄປນອກ ເໜືອ ຈາກການອອກແບບເວັບທີ່ຕອບສະ ໜອງ, ແລະເບິ່ງວິທີທີ່ພວກເຮົາສາມາດສ້າງເວັບໄຊທ໌ທີ່ຕອບສະ ໜອງ ໄດ້ຢ່າງແທ້ຈິງ.

ໂປໂລແມ່ນຜູ້ອອກແບບໂຕ້ຕອບທີ່ຕັ້ງຢູ່ Brighton, ອັງກິດ. ລາວມີຄວາມສຸກທີ່ສຸດໃນເວລາທີ່ຫັດຖະ ກຳ ແບບງ່າຍດາຍແລະມີສ່ວນຮ່ວມທີ່ມີຢູ່ໃນເວັບ.