Laozaa ເວັບໄຊຂອງຄົນໄວ ຊ່າາາາາາາາາາາາາ

Developer Zone => Web Development => Topic started by: Sompasong Vongthavone on April 08, 2018, 12:44:35 PM

Title: ວິທີສະແດງເນື້ອຫາໃນຮູບແບບທີ່ຕ້ອງການແບບ Resposive ໃນ Wordpress
Post by: Sompasong Vongthavone on April 08, 2018, 12:44:35 PM
ໃນຕອນນີ້ຂ້າພະເຈົ້າກຳລັງພັດທະນາ 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 ທັງສອງນັ້ນ ນ້ອງຈາກບໍ່ໄດ້ໃຊ້ປະໂຫຍດໂຕໃດຕໍ່ໜຶ່ງແລ້ວ ຍັງເຮັດໃຫ້ເວັບໂຫຼດຊ້າ ແລະ ໜັກຝັ່ງຜູ້ໃຊ້ນຳ
Title: Re: ວິທີສະແດງເນື້ອຫາໃນຮູບແບບທີ່ຕ້ອງການແບບ Resposive ໃນ Wordpress
Post by: Os555 on April 08, 2018, 11:33:16 PM


ລອງເບີ່ງນີ້ເດີ້ ອ.ຈ


http://www.siamhtml.com/breakpoints-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-responsive-web-design/