<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#inner{
width: 1200px;
margin: 0 auto;
}
#left{
width: 50%;
height: 400px;
background: red;
float: left;
}
#right{
width: 50%;
height: 400px;
background: green;
float: right;
}
@media screen and (max-width: 1500px) and (min-width:1200px){
#inner{
width: 1200px;
}
#left{
width: 50%;
}
#right{
width: 50%;
}
}
@media screen and (min-width:800px) and (max-width:1200px){
#inner{
width: 100%;
}
#left{
width: 40%;
float: left;
}
#right{
width: 60%;
float: left;
}
}
@media screen and (max-width:800px) {
#inner{
width: 100%;
}
#left{
width: 20%;
float: left;
}
#right{
width: 80%;
float: left;
}
}
</style>
</head>
<body>
<div id="inner">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#inner{
width: 1200px;
margin: 0 auto;
}
#left{
width: 50%;
height: 400px;
background: red;
float: left;
}
#right{
width: 50%;
height: 400px;
background: green;
float: right;
}
@media screen and (max-width: 1500px) and (min-width:1200px){
#inner{
width: 1200px;
}
#left{
width: 50%;
}
#right{
width: 50%;
}
}
@media screen and (min-width:800px) and (max-width:1200px){
#inner{
width: 100%;
}
#left{
width: 40%;
float: left;
}
#right{
width: 60%;
float: left;
}
}
@media screen and (max-width:800px) {
#inner{
width: 100%;
}
#left{
width: 20%;
float: left;
}
#right{
width: 80%;
float: left;
}
}
</style>
</head>
<body>
<div id="inner">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>