Tích hợp giao diện web cho di động công nghệ 2013
[tintuc]
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 <head>
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
----------------------------------------------- */
@media only screen and (max-width:1024px){
#header-wrapper,#menu,#content-wrapper,#footer-wrapper{padding:0 0;width:990px}}
/* 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
----------------------------------------------- */
@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
----------------------------------------------- */
@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;}
}
Để kiểm tra xem đã thành công hay chưa, bạn kéo nhỏ trình duyệt lại là sẽ thấy nhé
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.
- ThaiAiTi chúc bạn thành công ! [/tintuc]
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 <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
----------------------------------------------- */
@media only screen and (max-width:1024px){
#header-wrapper,#menu,#content-wrapper,#footer-wrapper{padding:0 0;width:990px}}
/* 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
----------------------------------------------- */
@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
----------------------------------------------- */
@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;}
}
Để kiểm tra xem đã thành công hay chưa, bạn kéo nhỏ trình duyệt lại là sẽ thấy nhé
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.
- ThaiAiTi chúc bạn thành công ! [/tintuc]
0 nhận xét:
Đăng nhận xét