帮我看一下，怎么可以自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 550px;
margin: 0 auto;
background: #ADD8E6;
}
.left{
width: 500px;
float: left;
margin-top: 200px;
margin-left: 300px;
}
.right{
width: 500px;
float: right;
margin-top: 200px;
margin-right: 200px;
}
.banner{
width: 100%;
height: 393px;
margin: 0 auto;
background: pink;
}
.banner .left{
width: 30%;
float: left;
margin-top: 200px;
margin-left: 300px;
}
.banner .right{
width: 30%;
float: right;
margin-top: -66px;
margin-right: 40px;
}
.banner .middle{
width: 40%;
float:left;
margin-top: 200px;
margin-left: -80px;
}
</style>
</head>
<body>
<div class="header">
<div class="left">
<img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg">
</div>
<div class="right">
<img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg">
</div>
</div>
<div class="banner">
<div class="left">
<img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg">
</div>
<div class="middle">
<img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg">
</div>
<div class="right">
<img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg">
</div>
</div>
</body>
</html>
效果出来了，就是不知道，怎么自适应，希望大家帮忙一下，小弟！
慕无忌10695942回答
-
奋斗好青年
响应式的话最好尺寸不要用px定死,要用宽度用%布局,媒体查询可以参考一下boostrap布局方式,布局排版是12的倍数... -
码农2号
不要定死多少px，使用rem作为单位、媒体查询、百分比或者flex等。
随时随地看视频慕课网APP
Html/CSS