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;}
}
Test Responsive ở đây: http://responsivetest.net/
Mọi thắc mặc vui lòng để lại Cmt và ĐC web.