页面布局-响应式 2.19

完成响应式布局的实现
已知一个自适应布局的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>code</title>
    <style type="text/css">
        *{padding: 0;margin: 0;}
        html,body{width: 100%;height: 100%;background-color: #dddddd;}
        .parent{width: 960px;margin: 0 auto;}
        .side{float: left;width: 300px;height:1000px; margin-right: 10px;background-color: #4EB3B9;}
        .main{float: left;width: 650px;height:1000px; background-color: #FF0097;}
        @media screen and (min-width:400px) and (max-width:1000px ) {
            .parent{width: 100%;display: flex;}
            .side{width:100px;margin-right: 10px;}
            .main{flex:1;}
        }
        @media screen and (max-width: 400px;) {
            .parent{width: 100%;display: flex;flex-direction: column;}
            .side{margin-bottom: 10px;flex: 1;}
            .main{flex: 1}
        }

    </style>
</head>
<body>
    <div class="parent">
        <div class="side">side</div>
        <div class="main">main</div>
    </div>  
</body>
</html>```

Q1: 高度height如何自适应？？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>code</title>
<style type="text/css">
*{padding: 0;margin: 0;}
html,body{width: 100%;height: 100%;background-color: #dddddd;}
.parent{width: 960px;margin: 0 auto;height: 100%;}
.side{float: left;width: 300px;height:100%; margin-right: 10px;background-color: #4EB3B9;}
.main{float: left;width: 650px;height:100%; background-color: #FF0097;}
@media screen and (min-width:400px) and (max-width:1000px ) {
.parent{width: 100%;display: flex;}
.side{width:100px;margin-right: 10px;}
.main{flex:1;}
}
@media screen and (max-width: 400px;) {
.parent{width: 100%;display: flex;flex-direction: column;}
.side{margin-bottom: 10px;flex: 1;}
.main{flex: 1}
}

</style>

</head>
<body>
<div class="parent">
<div class="side">side</div>
<div class="main">main</div>
</div>
</body>
</html>```

页面布局-响应式 2.19

推荐阅读更多精彩内容