典型的なレスポンスレイアウトインスタンスコード
2277 ワード
-
header
main
main.css:
*{margin:0;padding:0;}
body{
font:18px/20px "Microsoft YaHei",arial,serif;
color:#fff;
background:#fff;
}
img{border:0;}
a{text-decoration:none;}
.header,
.container,
.footer{
margin-left:auto;
margin-right:auto;
margin-top:10px;
text-align:center;
}
.header{
height:100px;
background:#333;
}
.sidebarLeft,
.main,
.sidebarRight{
background:#333;
}
.footer{
height:100px;
background:#333;
}
@media screen and (min-width:960px){
.header,
.container,
.footer{
width:960px;
}
.sidebarLeft,
.main,
.sidebarRight{
float:left;
height:400px;
}
.sidebarLeft,
.sidebarRight{
width:200px;
}
.main{
margin-left:10px;
margin-right:10px;
width:540px;
}
.container{
height:400px;
}
}
@media screen and (min-width:600px) and (max-width:960px){
.header,
.container,
.footer{
width:600px;
}
.sidebarLeft,
.main{
float:left;
height:400px;
}
.sidebarRight{
display:none;
}
.sidebarLeft{
width:160px;
}
.main{
margin-left:10px;
width:430px;
}
.container{
height:400px;
}
}
@media screen and (max-width:600px){
.header,
.container,
.footer{
width:400px;
}
.sidebarLeft,
.sidebarRight{
width:400px;
height:100px;
}
.main{
margin-top:10px;
width:400px;
height:200px;
}
.sidebarRight{
margin-top:10px;
}
.container{
height:420px;
}
}
/*
//
.header,
.container,
.footer{
margin-left:auto;
margin-right:auto;
width:960px;
margin-top:10px;
text-align:center;
}
.header{
height:100px;
background:#333;
}
.sidebarLeft,
.main,
.sidebarRight{
background:#333;
float:left;
height:400px;
}
.sidebarLeft,
.sidebarRight{
width:200px;
}
.main{
margin-left:10px;
margin-right:10px;
width:540px;
}
.container{
height:400px;
}
.footer{
height:50px;
background:#333;
}
*/
【ネットから転載】