ທ່ານຂຽນ CSS ການສອບຖາມວິທີການໃດ?

syntax ສໍາລັບທັງສອງຄໍາຖາມສື່ມວນຊົນທີ່ມີຄວາມກວ້າງຂວາງແລະສູງສຸດ

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

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

Media Queries in Action

ດັ່ງນັ້ນທ່ານໃຊ້ວິທີການສອບຖາມກ່ຽວກັບເວັບໄຊທ໌ໃດ? ນີ້ແມ່ນຕົວຢ່າງທີ່ງ່າຍດາຍຫຼາຍ:

1. ທ່ານຈະເລີ່ມຕົ້ນດ້ວຍເອກະສານ HTML ທີ່ມີໂຄງສ້າງທີ່ມີຮູບແບບທີ່ບໍ່ມີຮູບແບບໃດໆ (ທີ່ CSS ແມ່ນສໍາລັບ)
2. ໃນໄຟລ໌ CSS ຂອງທ່ານ, ທ່ານຈະເລີ່ມຕົ້ນຕາມທີ່ທ່ານເຮັດຕາມປົກກະຕິໂດຍການສ້າງຫນ້າເວັບແລະການຕັ້ງຄ່າພື້ນຖານສໍາລັບວິທີທີ່ເວັບໄຊທ໌ຈະເບິ່ງ. ບອກວ່າທ່ານຕ້ອງການຂະຫນາດຕົວອັກສອນຂອງຫນ້າເປັນ 16 pixels, ທ່ານສາມາດຂຽນ CSS ນີ້ໄດ້: body {font-size: 16px; }
3. ໃນປັດຈຸບັນ, ທ່ານອາດຈະຕ້ອງການເພີ່ມຂະຫນາດຕົວອັກສອນສໍາລັບຫນ້າຈໍຂະຫນາດໃຫຍ່ທີ່ມີອະສັງຫາລິມະສັບຢ່າງຫຼວງຫຼາຍທີ່ຈະເຮັດເຊັ່ນນັ້ນ. ນີ້ແມ່ນບ່ອນທີ່ Media Queries kick in. ທ່ານຈະເລີ່ມການ Media Query ດັ່ງນີ້: @media screen ແລະ (min-width: 1000px) {}
4. ນີ້ແມ່ນວິທີການຂອງ Media Query. ມັນເລີ່ມຕົ້ນດ້ວຍ @media ເພື່ອສ້າງ Media Query ຕົວມັນເອງ. ຕໍ່ໄປທ່ານກໍານົດ "ປະເພດສື່", ເຊິ່ງໃນກໍລະນີນີ້ແມ່ນ "ຫນ້າຈໍ". ນີ້ແມ່ນໃຊ້ກັບຫນ້າຈໍຄອມພິວເຕີ, ແທັບເລັດ, ໂທລະສັບມືຖື, ແລະອື່ນໆ. ໃນທີ່ສຸດ, ທ່ານສິ້ນສຸດ Media Query ດ້ວຍ "ຄຸນະລັກສະນະສື່". ໃນຕົວຢ່າງຂອງພວກເຮົາຂ້າງເທິງ, ວ່າແມ່ນ "ກາງຄວາມກວ້າງ: 1000px". ນີ້ຫມາຍຄວາມວ່າ Media Query ຈະເຕະສໍາລັບການສະແດງທີ່ມີຄວາມກວ້າງຕໍາ່ສຸດທີ່ 1000 ພິກະເຊນ.

1. ຫຼັງຈາກບັນດາອົງປະກອບເຫຼົ່ານີ້ຂອງ Media Query, ທ່ານຈະເພີ່ມການເປີດແລະປິດຄຽດທີ່ຄ້າຍຄືກັບສິ່ງທີ່ທ່ານຈະເຮັດໃນກົດລະບຽບ CSS ປົກກະຕິ.
2. ຂັ້ນຕອນສຸດທ້າຍໄປຫາ Media Query ແມ່ນເພື່ອເພີ່ມກົດລະບຽບ CSS ທີ່ທ່ານຕ້ອງການໃຊ້ເມື່ອເງື່ອນໄຂນີ້ຖືກພົບ. ທ່ານເພີ່ມກົດລະບຽບ CSS ເຫຼົ່ານີ້ລະຫວ່າງວົງເລັບທີ່ເຮັດໃຫ້ Media Query ຄືດັ່ງນີ້: @media screen ແລະ (min-width: 1000px) {body {font-size: 20px; }
3. ເມື່ອເງື່ອນໄຂຂອງການສໍາຫຼວດສື່ມວນຊົນຖືກຕອບສະຫນອງ (ປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບແມ່ນຢ່າງຫນ້ອຍ 1000 ພິກະເຊນກວ້າງ), ແບບ CSS ນີ້ຈະມີຜົນກະທົບ, ປ່ຽນຂະຫນາດຕົວອັກສອນຂອງເວັບໄຊທ໌ຈາກ 16 pixels ທີ່ພວກເຮົາໄດ້ສ້າງຕັ້ງຂຶ້ນມາເປັນມູນຄ່າໃຫມ່ຂອງພວກເຮົາ 20 pixels.

ເພີ່ມຮູບແບບອື່ນໆ

ທ່ານສາມາດຈັດກົດລະບຽບ CSS ຫຼາຍໃນ Media Query ດັ່ງທີ່ຈໍາເປັນເພື່ອປັບປຸງຮູບລັກສະນະຂອງເວັບໄຊທ໌ຂອງທ່ານ. ຕົວຢ່າງ: ຖ້າທ່ານຕ້ອງການບໍ່ພຽງແຕ່ເພີ່ມຂະຫນາດຕົວອັກສອນເຖິງ 20 pixels, ແຕ່ຍັງປ່ຽນສີຂອງວັກທັງຫມົດໃຫ້ເປັນສີດໍາ (# 000000), ທ່ານສາມາດເພີ່ມນີ້:

@media screen and (min-width: 1000px) {body {font-size: 20px } p {color: # 000000 }}

ເພີ່ມການສືບຕໍ່ສື່ມວນຊົນຫຼາຍຂຶ້ນ

ນອກຈາກນັ້ນ, ທ່ານສາມາດເພີ່ມລາຍການແບບສໍາຫຼວດຫຼາຍຂຶ້ນສໍາລັບຂະຫນາດຂະຫນາດໃຫຍ່ທຸກຢ່າງ, ເພີ່ມໃຫ້ຮູບແບບສະໄຕຂອງທ່ານເຊັ່ນ:

@media screen and (min-width: 1000px) {body {font-size: 20px } p {color: # 000000 {} @media screen and (min-width: 1400px) {body {font-size: 24px }}

ການສອບຖາມສື່ທໍາອິດຈະເຕະໃນຄວາມກວ້າງ 1000 pixels, ປ່ຽນຂະຫນາດຕົວອັກສອນເປັນ 20 pixels. ຫຼັງຈາກນັ້ນ, ເມື່ອເບົາເຊີຢູ່ເຫນືອ 1400 pixels, ຂະຫນາດຂອງຕົວອັກສອນຈະປ່ຽນເປັນ 24 pixels. ທ່ານສາມາດເພີ່ມຈໍານວນການສອບຖາມສື່ທີ່ຕ້ອງການສໍາລັບເວັບໄຊທ໌ຂອງທ່ານ.

ຂະຫນາດນ້ອຍສຸດແລະຄວາມກວ້າງສູງສຸດ

ໂດຍທົ່ວໄປແລ້ວ, ມີສອງວິທີທີ່ຈະຂຽນການສອບຖາມສື່ - ໂດຍໃຊ້ "ຄວາມກວ້າງ" ຫຼື "ຄວາມກວ້າງສູງສຸດ". ມາຮອດປະຈຸບັນ, ພວກເຮົາໄດ້ເຫັນ "ຂະຫນາດນ້ອຍ" ໃນການປະຕິບັດ. ນີ້ເຮັດໃຫ້ການສອບຖາມສື່ມີຜົນກະທົບເມື່ອເວັບເບົາເຊີໄດ້ບັນລຸຢ່າງຫນ້ອຍວ່າຄວາມກວ້າງຂັ້ນຕ່ໍາ. ດັ່ງນັ້ນ, ຄໍາຖາມທີ່ໃຊ້ "min-width: 1000px" ຈະຖືກນໍາໃຊ້ໃນເວລາທີ່ຕົວທ່ອງເວັບແມ່ນຢ່າງຫນ້ອຍ 1000 pixels ກວ້າງ. ແບບຂອງການນໍາໃຊ້ສື່ນີ້ຖືກນໍາໃຊ້ເມື່ອທ່ານກໍາລັງສ້າງເວັບໄຊທ໌ຫນຶ່ງໃນລັກສະນະ "ມືຖືທໍາອິດ".

ຖ້າທ່ານໃຊ້ "ຄວາມກວ້າງສູງສຸດ", ມັນເຮັດວຽກໃນທາງກົງກັນຂ້າມ. ການສໍາຫຼວດສື່ຂອງ "max-width: 1000px" ຈະຖືກນໍາໃຊ້ເມື່ອຕົວທ່ອງເວັບໄດ້ຫຼຸດລົງຕໍ່າກວ່າຂະຫນາດນີ້.

ກ່ຽວກັບເບົາເຊີເກົ່າ

ສິ່ງທ້າທາຍຫນຶ່ງທີ່ມີ Media Queries ແມ່ນການຂາດສະຫນັບສະຫນູນຂອງພວກເຂົາໃນເວີຊັ່ນເກົ່າໃນ Internet Explorer. ຂໍຂອບໃຈທີ່ ມີໂປແກຼມທີ່ມີຢູ່ ເຊິ່ງສາມາດສະຫນັບສະຫນູນການສະຫນັບສະຫນູນສໍາລັບ Media Queries ໃນບັນດາຕົວທ່ອງເວັບທີ່ເກົ່າແກ່, ໃຫ້ທ່ານສາມາດນໍາໃຊ້ພວກມັນໃນເວັບໄຊທ໌ໃນຂະນະທີ່ຍັງຫມັ້ນໃຈວ່າການສະແດງຂອງເວັບໄຊທ໌ນັ້ນບໍ່ແຕກແຍກໃນຊອບແວຂອງຕົວທ່ອງເວັບທີ່ເກົ່າແກ່.

ແກ້ໄຂໂດຍ Jeremy Girard ໃນວັນທີ 1/24/17