ໃນຕອນນີ້ຂ້າພະເຈົ້າກຳລັງພັດທະນາ Theme ໃຫ້ກັບເວັບໄຊ້ ໜຶ່ງເວັບຢູ່ ແລ້ວຕ້ອງເຮັດໃຫ້ມັນ Responsive ເຊິ່ງມັນກໍບໍ່ແມ່ນບັນຫາໃຫຍ່ເພາະວ່າ Bootstrap ກໍຈັດການຢູ່ໃນລະດັບໜຶ່ງ.
ບັນຫາມັນຢູ່ບ່ອນທີ່ວ່າຂ້າພະເຈົ້າຢາກກວດຄວາມກວ້າງຂໍຂະໜາດຈໍ ແລ້ວສະແດງຄອນເທັນ ທີ່ກຳນົດໄວ້ດັ່ງນີ້
<div class="desktop-feature-posts">
ສ່ວນນີ້ຈະສະແດງຜົນເວລາໃຊ້ໜ້າຈໍຄອມ
</div>
<div class="mobile-feature-posts">
ສ່ວນນີ້ຈະສະແດງຜົນເວລາໃຊ້ຢູ່ໃນມືຖື ຫຼື ແທັບເລັດ
</div>
ສ່ວນຂອງ CSS ກໍມີດັ່ງນີ້
/** desktop **/
.desktop-feature-posts {
display: block;
}
.mobile-feature-posts {
display: none;
}
/** mobile or tablet **/
@media screen and (max-width: 320px) {
.desktop-feature-posts {
display: none;
}
.mobile-feature-posts {
display: block;
}
}
@media screen and (min-width: 321px) and (max-width: 768px) {
.desktop-feature-posts {
display: none;
}
.mobile-feature-posts {
display: block;
}
}
ຈາກ CSS ດ້ານເທິງນັ້ນ ຂ້າພະເຈົ້າກໍເຫັນວ່າ ໜ້າເວັບກໍສະແດງຕາມທີ່ຕ້ອງການ ແຕ່ຕິດທີ່ບ່ອນວ່າ ທັງສ່ວນ desktop ແລະ mobile ຈະຖືກ render ອອກມາທັງຄູ່
ທ່ານໃດພໍຮູ້ວິທີບໍ່ ທີ່ຈະໃຫ້ມັນ render ສະເພາະສ່ວນ desktop ເວລາສະແດງໃນໜ້າຈໍຄອມ ແລະ render ສະເພາະສ່ວນ mobile ເວລາສະແດງຜົນໃນ mobile/tablet?
ເພາະວ່າການທີ່ render ທັງສອງນັ້ນ ນ້ອງຈາກບໍ່ໄດ້ໃຊ້ປະໂຫຍດໂຕໃດຕໍ່ໜຶ່ງແລ້ວ ຍັງເຮັດໃຫ້ເວັບໂຫຼດຊ້າ ແລະ ໜັກຝັ່ງຜູ້ໃຊ້ນຳ