Cách tạo Responsive cho Blogger

Thiết kế web đáp ứng ( RWD ) là một thiết kế web tiếp cận nhằm mục đích việc tạo các trang web để cung cấp một hình ảnh tối ưu cho người đọc dễ dàng và điều hướng với tối thiểu thay đổi kích thước, di chuyển màn hình, và di chuyển qua một loạt các thiết bị (từ màn hình máy tính để bàn đến điện thoại di động điện thoại).

Công nghệ 3G, 4G, Wifi hiện nay rất phổ biến và người sủ dụng các thiết bị cao cấp như iPad, iPhone, các thiết bị Smartphone Android để lướt web rất nhiều.

Thêm thẻ meta vào

Chúng ta phải hiểu về một chút CSS trong Templates Blogger. tùy thuộc vào cấu trúc Bloggger của bạn. sử dụng như hình minh họa.

Code này chèn trước thẻ ]]>

/* Màn hình PC
----------------------------------------------- */
@media only screen and (max-width:1024px)&n

/* Màn hình iPad
----------------------------------------------- */
@media only screen and (min-width:768px) and (max-width:989px)&n
&n
&n
&n
&n
&n

/* Màn hình iPhone Androi
----------------------------------------------- */
@media only screen and (max-width:767px) #header-wrapper, #outer-wrapper, #main-wrapper, #content-wrapper, #footer-wrapper &n
&n
&n
&n

/* Màn hình Smartphone
----------------------------------------------- */
@media only screen and (max-width:479px)&n
&n
&n
&n
}

Test Responsive ở đây: http://responsivetest.net/

Thay thế các thuộc tính css #outer-wrapper, #header-wrapper,#naviga,#content-wrapper,#footer-wrapper trong templates của bạn ( có nhiều người viết khác nhau ) bạn kiểm tra cấu trúc Templates của bạn xem và làm theo cho phù hợp.

Mọi thắc mặc vui lòng để lại Cmt và ĐC web.