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 sau thẻ <head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
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ẻ ]]></b:skin>
* Màn hình PC
/* Màn hình PC
----------------------------------------------- */
@media only screen and (max-width:1024px){
#header-wrapper,#menu,#content-wrapper,#footer-wrapper{padding:0 0;width:990px}}
* Màn hình iPad
/* Màn hình iPad
----------------------------------------------- */
@media only screen and (min-width:768px) and (max-width:989px){
#outer-wrapper, #header-wrapper,#naviga,#content-wrapper,#footer-wrapper{width:100%}
#main-wrapper{width:60%}
#sidebar-wrapper{width:40%}
.post{padding:10px}
#headtitle{width:260px}
#headtitle {display: block;float: left;margin: 15px auto;text-align: center;}}
* Màn hình iPhone Androi
/* Màn hình iPhone Androi
----------------------------------------------- */
@media only screen and (max-width:767px){
#header-wrapper, #outer-wrapper, #main-wrapper, #content-wrapper, #footer-wrapper {
width: 100%;}
#sidebar-wrapper{width:100%;padding: 10px 0 0;}
#headads{display:none}
#headtitle {display: inline-block;float: none;margin: 5px 0;text-align: center;width: 100%;}}
* Màn hình Smartphone
/* Màn hình Smartphone
----------------------------------------------- */
@media only screen and (max-width:479px){
#outer-wrapper, #header-wrapper,#naviga,#content-wrapper,#footer-wrapper{width:100%}
.post{padding: 5px;}
a.Thumbnail {height: 69px;width: 69px;}
.PopularPosts img {height: 39px;padding: 1px;width: 39px;}
}
Lưu ý: Tắt chế độ xem di động trong mục Mẫu
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.
Đăng nhận xét