完成响应式布局的实现
已知一个自适应布局的HTML结构如下：
<div class="parent">
<div class="side"></div>
<div class="main"></div>
</div>
请完成以下响应式要求：
1、默认情况，PC电脑（假设视窗都大于等于1000px）访问：两列布局，.parent宽960px且水平居中，左列.side宽300px，右列.main宽650px，列间距10px。
2、当用平板（假设视窗都大于400px且小于1000px）访问：两列布局，.parent宽度撑满，右列.main自适应剩余宽度，两列间距仍旧为10px。
3、当用手机（假设视窗都小于等于400px）访问：上下两行布局，.parent宽度撑满，.side和.main宽度也撑满，行间距为10px。
--------------------------------------------分割线-------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式布局练习</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body,.parent,.side,.main{
height: 100%;
}
@media screen and (min-width: 1000px){
html,body,.parent,.side,.main{height: 100%}
.parent{
margin:0 auto;
width: 960px;
height: 100%
}
.parent .side{
float: left;
width: 300px;
background-color: #20ACE6;
}
.parent .main{
margin-left: 310px;
background-color: #D526A9;
}
}
@media screen and (min-width: 400px) and (max-width: 1000px ) {
.parent{
width: 100%
display:flex;
}
.parent .side{
width: 300px;
margin-right: 10px;
}
.parent .main{
flex: 1;
}
}
@media screen and (max-width: 400px) {
.parent{
display:none;
width: 100%;
}
.parent .side{
width: 100%;
margin-bottom: 10px;
}
.parent .main{
width: 100%;
}
}
</style>
</head>
<body>
<div class="parent">
<div class="side"></div>
<div class="main"></div>
</div>
</body>
</html>