html media设置自适应屏幕用法,html5 media自适应基本操作

html5 media自适应基本操作

*{

margin: 0;padding: 0;

}

.header,.container,.footer{

margin: 10px auto;

}

.container{height: 500px; background: #ababab;}

.header{

height: 100px;

background: #FCF

}

.footer{

height: 80px;

background: #000;

}

.left,.right,.main{

float: left;

height: 500px;

}

@media screen and (min-width: 960px){

.header,.container,.footer{

width: 960px;

}

.main{margin-left: 5px;background:#009006;width: 550px;}

.left,.right{width: 200px}

.right{margin-left:5px;}

}

@media screen and (min-width: 600px) and (max-width: 960px){

.header,.container,.footer{

width: 600px;

}

.main{margin-left: 5px;background:#009006;width: 435px;}

.left,.right{width: 160px}

.right{display: none;}

}

@media screen and (max-width: 400px){

.header,.container,.footer{

width: 400px;

}

.main{background:#009006;}

.main{height: 280px;}

.left,.right,.main{width: 400px; float: none; margin: 5px auto;}

.left,.right{height: 100px; background: red;}

}

左

中

右