Hướng dẫn tối ưu website landingpage thân thiện với di động

Bài viết này nhằm tổng hợp những điểm chưa tối ưu được trên template landingpage 3S của tú cao

B1: Cần download template landingpage 3S từ website http://nguyencaotu.com/
B2: Vào menu giao diện và chỉnh sửa
+ Thêm đoạn mã sau vào sau vào cuối file stylesheet (style.css)

/******** For mobile device ********/
/******************************/
/*---- Responsive base screen witdh ------- */
/* width - 30 */
/* Tablet Devices Resizing */
@media screen and (max-width: 1024px) and  (min-width: 970px){
}
@media screen and  (max-width: 970px){
}
@media screen and  (max-width: 870px)  and (min-width:750px){
}
@media screen and (max-width:750px) and (min-width:680px){
}
@media screen and (min-width:320px) and (max-width: 480px) {
}
@media screen and (max-width: 380px) {
}
/*---- end Responsive base screen witdh ------- */

=> Sau khi thêm đa được như sau:

+ Thêm đoạn mã sau vào file themes header (header.php) trước thẻ </header>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

=> Sau khi thêm đa được như sau:



B3: Cài đặt plugin jetpack

+ Sau khi cài đặt song, ta vào kích hoạt chức năng dành cho di động như sau:

Hình ảnh đã kích hoạt chức năng di động

+ Sau đó lưu vào là ok đã đã được một website landingpage thân thiện với di động.

Cảm ơn bạn đã xem bài viết này, nếu có gì không hiểu để lại lời nhắn từ blog tôi sẽ giúp bạn giải quyết vấn đề tốt nhất.