我将要制作一个响应式Blogger模板,我将从屏幕媒体查询开始,但不确定这些是否正确。
@media(max-width:1960px){
/*For TV screen */
body{min-width:1660px;}
h1{font-size:60px;}
img{max-width:100%; height:auto;}
.sidebar .sidebar.section .widget{width:280px;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:1660px;max-width:1660px;_width:1900px;}}
@media(max-width:1380px){
/* For Desktop Screen */
body{min-width:1120px;}
h1{font-size:50px;}
img{max-width:100%; height:auto;}
.sidebar .sidebar.section .widget{width:240px;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:1120px;max-width:1120px;_width:1300px;}}
@media(max-width:1295px){
/* For Laptop Screen */
body{min-width:1020px;}
h1{font-size:35px;}
img{max-width:100%; height:auto;}
.sidebar .sidebar.section .widget{width:215px;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:1020px;max-width:1020px;_width:1200px;}}
@media (max-width:1050px){
/* For Tablet/Ipad screens */
body{min-width:880px !important;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:840px !important;max-width:880px !important;_width:880px !important;}
img{max-width:100%; height:auto;}
h1{font-size:21px;}
}
@media (max-width:800px){
/* For Smartphone/high end mobile devices */
body{min-width:100% !important;}
.content-outer, .content-fauxcolumn-outer, .region-inner{min-width:100% !important;max-width:100% !important;_width:100% !important;}.sidebar .sidebar.section .widget, .main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {display:none !important;}.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
img{max-width:100%; height:auto;}
h1{font-size:18px;}
h5{font-size:12px;}
}