大多数现代网站使用响应式网页设计，现在您必须考虑实际反应的意义，响应式网站可以适应不同的屏幕尺寸，并可以相应地调整其设计和布局。
在本教程中，我们将学习如何使用HTML和CSS进行响应式网站设计，但首先，我们将了解基本网站布局如何，请参见下图。
上述布局是一个简单的网站布局，我们将首先构建上述布局，然后我们将其转换为响应式布局。布局的HTML框如下所示
<!DOCTYPE html>
<html>
<head><title>Responsive</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div>
<div>
<!--header-->
</div>
</div>
<div>
<div>
<div>
<!--main-->
</div>
<div>
<!--sidebar-->
</div>
<div></div>
</div>
</div>
<div>
<div>
<!--footer-->
</div>
</div>
</body>
</html>
现在让我们来做css设计部分，给我们无聊的HTML一些乐趣，让我们制作一个名为style.css的CSS文件，并在其中键入下面的代码
body{
margin:0;
padding:0;
}
.flt-left{
float:left;
}
.flt-right{
float:right;
}
.clear{
clear:both;
}
.header-wrap{
width:100%;
}
.header{
padding:20px 0 20px 0;
background: lightcoral;
max-width:1000px;
margin:auto;
color:white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
}
.main-wrap{
width:100%;
margin:0;
}
.main-container{
max-width:1000px;
margin:auto;
color:white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
}
.main{
width:73%;
background:lightgreen;
margin:0;
}
.sidebar{
width:20%;
background: lightsalmon;
margin:0;
}
.footer-wrap{
width:100%;
margin:0;
padding:0;
}
.footer{
padding:20px 0 20px 0;
background: lightcoral;
max-width:1000px;
margin:auto;
color:white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
}
现在我们已经成功构建了我们的布局，但它仍然没有响应，所以我们将使其做出响应，制作一个名为response.css的新的CSS文件，并在其中键入下面的代码
@media screen and (max-width: 700px){
body{
margin:0;
padding:0
}
p{
padding:0;
margin:0;
}
.header{
margin:auto;
width:100%;
}
.main{
float:none;
margin:auto;
width:100%;
padding:20px 0 20px 0;
}
.sidebar{
float:none;
margin:auto;
width:100%;
padding:20px 0 20px 0;
}
}
现在我们已经成功构建了响应式布局，上述布局将自动适应不同的屏幕尺寸。
谢谢你的阅读。
了解更多web资讯请关注我的微信公众号：芒果web ；或者微信搜索（javascriptes6）;
将您的查询和反馈发送到评论区或在我们的微信公众号 页面上留言。您也可以在下面评论您的问题。
另外，别忘了订阅我的头条号。
如果你喜欢这篇文章，那么请分享一下，帮助我们成长。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
