CSS ສອບຖາມ Media: ຂັ້ນຕອນທີໂດຍຂັ້ນຕອນອະທິບາຍຄຸນສົມບັດແລະການທົບທວນຄືນ

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

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

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

ການຖືກໍາເນີດຂອງ CSS Media ສອບຖາມ

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

ຫຼັງຈາກນັ້ນມາ CSS3 Media ສອບຖາມ. ກັບເຂົາເຈົ້າມາເທົ່ານັ້ນຄວາມເປັນໄປໄດ້ຂອງການດໍາເນີນການເຄື່ອນໄຫວການອອກແບບ.

ການອອກແບບແບບໄດນາມິກເປັນແນວໃດ?

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

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

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

ບັນຫາດັ່ງກ່າວສາມາດໄດ້ຮັບການແກ້ໄຂໂດຍການນໍາໃຊ້ການອອກແບບໃຫ້ເຫມາະສົມແລະໂທລະສັບມືຖືທີ່ມີ CSS3 Media ສອບຖາມ. ໂດຍການນໍາໃຊ້ແບບສອບຖາມສື່ມວນຊົນ, ພວກເຮົາສ້າງສະຖານທີ່ຂອງເນື້ອໃນຂອງ ... ໃນປັດຈຸບັນມັນເຮັດວຽກຄ້າຍຄືນີ້:

• ເທິງ - ຫນ່ວຍບໍລິການທີ່ມີເມນູນໍາທິດຕັ້ງ;
• ພາຍໃຕ້ການມັນ - ຕັນໄດ້ມີການຕິດຕໍ່, ຊຶ່ງສາມາດໃນປັດຈຸບັນຍັງວາງສາຍ;
• ເນື້ອໃນ sidebar ບໍ່ສະແດງໃນຂ້າງຂອງ <ຕົ້ນຕໍ> ເນື້ອໃນໂຄດຄໍາສັ່ງ, ແລະຂ້າງເທິງນີ້ມັນ.

ນີ້ເປັນຕົວຢ່າງທີ່ງ່າຍດາຍຂອງສິ່ງທີ່ສາມາດເຮັດໄດ້ດ້ວຍຄວາມຮັບຜິດຊອບການອອກແບບ Web Media ສອບຖາມ. ໃນຄວາມເປັນຈິງເປັນໄປໄດ້ຫຼາຍຂຶ້ນ.

ດັ່ງນັ້ນສິ່ງທີ່ເປັນການສອບຖາມສື່ມວນຊົນ?

понимают модуль CSS3, с помощью которого можно заставить контент страницы адаптироваться к определенным условиям. ພາຍໃຕ້ CSS Media ສອບຖາມ CSS3 ເຂົ້າໃຈໂມດູນໄລຍະ, ມີທີ່ທ່ານສາມາດເຮັດໃຫ້ເນື້ອໃນຂອງຫນ້າເອກສານເພື່ອໃຫ້ເຫມາະສົມກັບສະພາບການສະເພາະໃດຫນຶ່ງ. ສໍາລັບຕົວຢ່າງ, ມັນຈະເລີ່ມຕົ້ນທີ່ຈະຕອບສະຫນອງຕໍ່ກັບຂະຫນາດຫນ້າຈໍ, ຫຼືອຸປະກອນປະຖົມນິເທດ (ຮູບ / ພູມສັນຖານ).

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

CSS Media ສອບຖາມຄວາມເຂົ້າກັນໄດ້ຂອງຕົວທ່ອງເວັບ

Safari до Chrome. ຕົວທ່ອງເວັບທີ່ທັນສະໄຫມທັງຫມົດສະຫນັບສະຫນູນເຕັກໂນໂລຊີດັ່ງກ່າວນີ້, ຈາກ Safari ກັບ Chrome. Internet Explorer возникнут проблемы… Но давайте признаем честно – у тех, кто до сих пор пользуется старыми IE, буквально все может вызвать проблемы. ແນ່ນອນວ່າ, ຜູ້ຊົມໃຊ້ຂອງສະບັບເກົ່າຂອງ Internet Explorer ມີບັນຫາ ... ແຕ່ໃຫ້ຂອງປະສົບກັບມັນດ້ວຍຄວາມຊື່ສັດ - ຜູ້ທີ່ຍັງນໍາໃຊ້ອາຍຸຂອງ IE, ພຽງແຕ່ກ່ຽວກັບສິ່ງທີ່ສາມາດເຮັດໃຫ້ເກີດບັນຫາ.

Syntax ປັບຮູບແບບສື່ມວນຊົນແບບສອບຖາມ

html. ບາງເທື່ອທ່ານໄດ້ຮັບການສໍາຜັດກັບການສອບຖາມສື່ມວນຊົນໃນເວລາທີ່ເຊື່ອມຕໍ່ເອກະສານແບບໃນການ html. ຈືຂໍ້ມູນການບັນທັດທີ່? Иногда в конец добавлялся еще один параметр, который выглядел так: media='screen'. < 'stylesheet' rel link = ປະເພດ = "text / css 'href = http: // ເວັບໄຊ /article/320575/%E2%80%99style.css%E2%80%99%3E ບາງຄັ້ງໃນທີ່ສຸດເພີ່ມຕົວກໍານົດການອື່ນ, ຜູ້ເບິ່ງເປັນ: ສື່ມວນຊົນ = 'ຫນ້າຈໍ.

ນີ້ແມ່ນການສອບຖາມສື່ມວນຊົນ! ເຂົາຊີ້ໃຫ້ເຫັນວ່າເອກະສານແບບທີ່ກໍານົດໄວ້ຈະເຮັດວຽກກ່ຽວກັບອຸປະກອນເຄື່ອງມືຈມີ TVs. screen можно указать print – в таком случае стили из файла применяются, если страница выводится на печать. ແທນທີ່ຈະ, ທ່ານສາມາດກໍານົດການພິມຫນ້າຈໍ - ໃນກໍລະນີດັ່ງກ່າວນີ້, ຄໍເຕົ້າໄຂ່ທີ່ຂອງເອກະສານດັ່ງກ່າວໄດ້ຖືກນໍາໃຊ້, ຖ້າຫາກວ່າຫນ້າຈະຖືກພິມ.

ທ່ານສາມາດນໍາໃຊ້ຄຸນລັກສະນະດັ່ງຕໍ່ໄປນີ້:

• – универсальный вариант, используется по молчанию, применяется во всех случаях; ທັງຫມົດ - ສະບັບພາສາສາກົນ, ນໍາໃຊ້ໂດຍ silence, ຖືກນໍາໃຊ້ໃນທຸກກໍລະນີ;
• – экраны (компьютеры, ноутбуки, планшеты, смартфоны и все, что оснащено дисплеем); scrteen - (ເຊົ່ນຄອມພິວເຕີ, ໂນດບຸກ, ແທັບເລັດ, ໂທລະສັບສະຫຼາດ, ແລະທຸກຄົນທີ່ແມ່ນເຄື່ອງມືຈມີການສະແດງເປັນ);
• принтеры; ພິມ - ເຄື່ອງພິມ;
• – проекторы; ການຄາດຄະເນ - ເຄື່ອງສາຍ;
• – речевые браузеры; ຄໍາເວົ້າ - ຄໍາເວົ້າຕົວທ່ອງເວັບ;
• – для устройств для слабовидящих; ຫນັງສືນູນ - ອຸປະກອນສໍາລັບການບົກຜ່ອງດ້ານສາຍຕາ;
• – для экранов телевизоров. ໂທລະພາບ - ສໍາລັບຫນ້າຈໍໂທລະພາບ.

ດັ່ງນັ້ນ, ບໍ່ແມ່ນທັງຫມົດ. , но они используются редко. ມີຄຸນລັກສະນະຫຼາຍ CSS ເພີ່ມເຕີມ Media ສອບຖາມ, ແຕ່ພວກເຂົາເຈົ້າໄດ້ຖືກນໍາໃຊ້ຫນ້ອຍທີ່ສຸດ. all. ໃນນອກຈາກນັ້ນ, ທ່ານບໍ່ໄດ້ລະບຸພາລາມິເຕີ - Default ໃນທຸກ.

ໂຄງປະກອບການຂອງສື່ມວນຊົນການສອບຖາມ

css. ແທນທີ່ຈະເປັນການສ້າງເອກະສານແບບ, ທ່ານສາມາດໃຊ້ລະຫັດ css. ມັນຄ້າຍຄືນີ້:

(тут будут стили } ຈໍສື່ @ ແລະ (ສູງສຸດທີ່ເຄຍ, width: 1024px) {( ມີຄໍເຕົ້າໄຂ່ທີ່}

@media, которая дает понять, что будет использоваться медиазапрос, идет указание типа устройства ( screen – экран) и дополнительные параметры. ຫຼັງຈາກທີ່ຄໍາສັ່ງສື່ @, ເຊິ່ງເຮັດໃຫ້ມັນຈະແຈ້ງວ່າການສອບຖາມສື່ມວນຊົນໄດ້ຖືກນໍາໃຊ້, ມີການສະແດງເຖິງມູນຂອງປະເພດຂອງອຸປະກອນ (ຫນ້າຈໍ - ຫນ້າຈໍ) ແລະຕົວກໍານົດເພີ່ມເຕີມ. Max Width. ໃນຕົວຢ່າງຂ້າງເທິງນີ້ໃຊ້ຄຸນສົມບັດ CSS Media ສອບຖາມນ້ໍາກວ້າງໄດ້. px. ນີ້ຫມາຍຄວາມວ່າຄໍເຕົ້າໄຂ່ທີ່ລະບຸໄວ້ໃນວົງເລັບຈະໄດ້ຮັບການມີສ່ວນຮ່ວມ, ຖ້າຫາກວ່າສະມາຊິກຂອງຂະຫນາດຫນ້າຈໍອຸປະກອນກ່ວາ 1024 px. и and не обязательны. ຫນ້າຈໍແລະບໍ່ຜູກມັດ. ທ່ານສາມາດຂຽນນີ້:

ສື່ @ (ສູງສຸດທີ່ເຄຍ, width: 1024px) {}

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

ການລະບຸພາລາມິເຕີທີ່ຫຼາກຫຼາຍ

ສົມມຸດວ່າທ່ານຕ້ອງການທີ່ຈະຈໍາກັດການລະດັບຂອງອຸປະກອນຈໍານວນຫນຶ່ງທີ່ຈະໄດ້ຮັບການນໍາໃຊ້ເພື່ອຈະເລືອກເອົາແບບໄດ້. px, но не больше 500 px. ໃຫ້ເວົ້າວ່າທ່ານຕ້ອງການທີ່ຈະສະແດງໃຫ້ເຫັນຄຸນສົມບັດຂອງມີພຽງແຕ່ຜູ້ທີ່ໄປຢ້ຽມຢາມເວັບໄຊຂອງທ່ານຈາກໂທລະສັບສະຫຼາດໄດ້, ຂະຫນາດຫນ້າຈໍແມ່ນບໍ່ຫນ້ອຍກ່ວາ 320 px, ແຕ່ບໍ່ມີຫຼາຍກ່ວາ 500 px. ໃນກໍລະນີ, ການຮ້ອງຂໍໃຊ້ເວລາຮູບແບບການ:

ສື່ @ (ຕ່ໍາ, width: 320px) ແລະ (ສູງສຸດທີ່ເຄຍ, width: 500px) {}

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

and не ограничивается одним. ແລະຈໍານວນຂອງຜູ້ປະກອບການແມ່ນບໍ່ຈໍາກັດຫນຶ່ງ. ທ່ານສາມາດເຮັດໃຫ້ເຂົາເຈົ້າໃຫ້ຫຼາຍເທົ່າທີ່ທ່ານຕ້ອງການ. ສໍາລັບຕົວຢ່າງ, ພະຍາຍາມເພື່ອສ້າງເປັນຫນ້າຈໍຂະຫນາດທີ່ແນ່ນອນສໍາລັບການໂທລະສັບສະຫຼາດແລະແຕກຕ່າງກັນ - ສໍາລັບ TVs.

ມີຈຸດເຊື່ອມຕໍ່ທີ່ສໍາຄັນ - ປະຖົມນິເທດຂອງອຸປະກອນຂອງຜູ້ໃຊ້ໄດ້. ຜູ້ໃດຜູ້ຫນຶ່ງທີ່ກໍາລັງອ່ານເວັບໄຊທ໌ກ່ຽວກັບໂທລະສັບສະຫຼາດຂອງທ່ານໃນປະຖົມນິເທດຮູບຄົນ, ໃຜຜູ້ຫນຶ່ງ - ກັບພູມສັນຖານ. orientation:portrait, для вторых, соответственно, orientation:landscape. ສໍາລັບອະດີດ, ທ່ານຈະຈໍາເປັນຕ້ອງໄດ້ປະຖົມນິເທດສະພາບການເພີ່ມເຕີມ: ຮູບ, ສໍາລັບຄັ້ງທີສອງ, ຕາມລໍາດັບ, ປະຖົມນິເທດ: ພູມສັນຖານ. @media. ສາຍເຫຼົ່ານີ້ແມ່ນໄດ້ສະແດງໃຫ້ເຫັນຢູ່ໃນວົງເລັບດັ່ງຕໍ່ໄປນີ້ທີມງານສື່ @. and. ທ່ານສາມາດແບ່ງປັນໃຫ້ເຂົາເຈົ້າໂດຍຜ່ານແລະ.

ອີກປະການຫນຶ່ງ nuance ທີ່ຫນ້າສົນໃຈ. and вы вполне можете использовать оператор or. ແທນທີ່ຈະ, ແລະທ່ານກໍອາດຈະນໍາໃຊ້ຫຼືປະຕິບັດ. ທ່ານຕ້ອງການສະພາບຢ່າງຫນ້ອຍຫນຶ່ງໃນການຮ້ອງຂໍເປັນຄວາມຈິງ! ສໍາລັບຕົວຢ່າງເຊັ່ນ:

) {} ສື່ @ (ສູງສຸດທີ່ເຄຍ, width: 500px) ຫຼື (ປະຖົມນິເທດ: ຮູບ) {}

px ИЛИ используется портретная ориентация, стили в фигурных скобках начнут действовать. ຖ້າຫາກວ່າຫນ້າຈໍແມ່ນຫນ້ອຍກ່ວາ 500 px ຫຼືການນໍາໃຊ້ປະຖົມນິເທດຮູບຄົນ, ສາຍຣັດໄດ້ຈະໃຊ້ເວລາຮູບແບບຜົນກະທົບ.

ຄໍາບໍ່ແມ່ນສໍາລັບການປັບໄຫມ, ປບັ

not. ການສອບຖາມຂອງສື່ມວນຊົນ, ທ່ານສາມາດສະແດງກິ່ງງ່າຄໍາບໍ່. ນີ້ແມ່ນເຮັດໄດ້ດັ່ງນີ້:

ສື່ @ (ບໍ່ນ້ໍາ, width: 700px ) {}

ຄຸນສົມບັດກໍາລັງເຮັດວຽກຖ້າ width ສູງສຸດບໍ່ທຽບເທົ່າກັບ 700 pixels.

ຄຸນນະສົມບັດສື່ມວນຊົນ

ການສອບຖາມສາມາດໄດ້ຮັບການນໍາໃຊ້ປະຕິບັດຫນ້າທາງສ່ວນຫນ້າຂອງການສ້າງຕັ້ງຂຶ້ນໃນຫຼາຍໆດ້ານ. W3C. ຄຸ້ນເຄີຍຕົວທ່ານເອງທີ່ມີທັງຫມົດທີ່ທ່ານສາມາດເຮັດໄດ້ອອນໄລນ໌ W3C. coders ສ່ວນໃຫຍ່ພຽງພໍທີ່ຈະເປັນເຈົ້າຂອງທັງສາມຕົ້ນຕໍ:

• (о нем мы уже говорили); ປະຖົມນິເທດ (ປະມານນັ້ນພວກເຮົາເວົ້າວ່າ);
• (ширина, ее тоже упоминали); width (width, ມັນຍັງໄດ້ກ່າວມາ);
• (высота). ລະດັບຄວາມສູງ (ຄວາມສູງ).

ລະດັບຄວາມສູງແມ່ນບໍ່ຄ່ອຍຈະຖືກນໍາໃຊ້, ແຕ່ມີບາງກໍລະນີທີ່ການຕັ້ງຄ່ານີ້ສາມາດຈະເປັນປະໂຫຍດ.

ເຮັດແນວໃດແລະບ່ອນທີ່ຈະວາງການຮ້ອງຂໍ?

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

ນີ້ບໍ່ແມ່ນທີ່ດີທີ່ສຸດ. ຫຼາຍດວກຕໍ່ກັບການຈັດວາງສໍາລັບຄຸນສົມບັດອຸປະກອນທີ່ແຕກຕ່າງກັນທັນທີຫຼັງຈາກຮູບແບບຕົ້ນຕໍ. ສໍາລັບຕົວຢ່າງ, ທ່ານມີ div, ເຊິ່ງຕັ້ງຄ່າສີ font ສີແດງ:

div {

ສີ: ສີແດງ;

}

ທັນທີຫຼັງຈາກການຮ້ອງຂໍຊີ້ໃຫ້ເຫັນ:

ສື່ @ (ຕ່ໍາ, width: 320px) {}

ກໍາຫນົດຄຸນສົມບັດ.

ດັ່ງກ່າວວິທີການທີ່ຈະເປັນ cumbersome ຖ້າຫາກວ່າທ່ານກໍາລັງໃຊ້ "» css ອັນບໍລິສຸດ. ການຊ່ວຍເຫຼືອຂອງຕົວປະມວນຜົນໄດ້. ພວກເຂົາເຈົ້າມີຫຼາຍຂອງໂອກາດທີ່ຫນ້າສົນໃຈສໍາລັບການຮ້ອງຂໍຄໍາຮ້ອງສະຫມັກທີ່ຖືກຕ້ອງກວ່າ.

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

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

ຍັງບໍ່ລືມວ່າທ່ານສາມາດງ່າຍຊີວິດຂອງທ່ານທີ່ມີຊອຟແວຫຼ້າສຸດ. ມັນບໍ່ແມ່ນພຽງແຕ່ກ່ຽວກັບຕົວປະມວນຜົນໄດ້. ມີ Gulp Group CSS Media ສອບຖາມສາມາດເຮັດໃຫ້ຂະບວນການງ່າຍຂຶ້ນຫຼາຍ. ແນະນໍາໃຫ້ແມ່ບົດເຄື່ອງມືນີ້ຫຼືໃດໆຂອງການປຽບທຽບຂອງຕົນ.