ວິທີສະແດງເນື້ອຫາໃນຮູບແບບທີ່ຕ້ອງການແບບ Resposive ໃນ Wordpress

  • 1 Replies
  • 292 Views

0 Members and 1 Guest are viewing this topic.

*

Sompasong Vongthavone

  • *
  • 2
  • Eat and eat and eat
    • View Profile
ໃນຕອນນີ້ຂ້າພະເຈົ້າກຳລັງພັດທະນາ Theme ໃຫ້ກັບເວັບໄຊ້ ໜຶ່ງເວັບຢູ່ ແລ້ວຕ້ອງເຮັດໃຫ້ມັນ Responsive ເຊິ່ງມັນກໍບໍ່ແມ່ນບັນຫາໃຫຍ່ເພາະວ່າ Bootstrap ກໍຈັດການຢູ່ໃນລະດັບໜຶ່ງ.
ບັນຫາມັນຢູ່ບ່ອນທີ່ວ່າຂ້າພະເຈົ້າຢາກກວດຄວາມກວ້າງຂໍຂະໜາດຈໍ ແລ້ວສະແດງຄອນເທັນ ທີ່ກຳນົດໄວ້ດັ່ງນີ້

Code: [Select]
<div class="desktop-feature-posts">
 ສ່ວນນີ້ຈະສະແດງຜົນເວລາໃຊ້ໜ້າຈໍຄອມ
</div>

<div class="mobile-feature-posts">
 ສ່ວນນີ້ຈະສະແດງຜົນເວລາໃຊ້ຢູ່ໃນມືຖື ຫຼື ແທັບເລັດ
</div>

ສ່ວນຂອງ CSS ກໍມີດັ່ງນີ້
Code: [Select]
/** 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 ທັງສອງນັ້ນ ນ້ອງຈາກບໍ່ໄດ້ໃຊ້ປະໂຫຍດໂຕໃດຕໍ່ໜຶ່ງແລ້ວ ຍັງເຮັດໃຫ້ເວັບໂຫຼດຊ້າ ແລະ ໜັກຝັ່ງຜູ້ໃຊ້ນຳ
« Last Edit: April 08, 2018, 12:46:22 PM by Sompasong Vongthavone »
ຂ້ອຍບໍ່ແມ່ນສາຍເດບ ຂ້ອຍສາຍກະບອກ
ມັນໃສ່ສະບາຍກວ່າ