大多数现代网站使用响应式网页设计，现在您必须考虑实际反应的意义，响应式网站可以适应不同的屏幕尺寸，并可以相应地调整其设计和布局。
在本教程中，我们将学习如何使用HTML和CSS进行响应式网站设计，但首先，我们将了解基本网站布局如何，请参见下图。
上述布局是一个简单的网站布局，我们将首先构建上述布局，然后我们将其转换为响应式布局。布局的HTML框如下所示
现在让我们来做设计部分，给我们无聊的HTML一些colours.So让我们制作一个名为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文件，并在其中键入下面的代码
@mediascreen 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;}
}
现在我们已经成功构建了响应式布局，上述布局将自动适应不同的屏幕尺寸。
谢谢你的阅读。
将您的查询和反馈发送在下面评论您的问题。
另外，别忘了订阅我们的简书。
如果你喜欢这篇文章，那么请分享一下，帮助我们成长。
