大多數現代網站使用響應式網頁設計，現在您必須考慮實際反應的意義，響應式網站可以適應不同的屏幕尺寸，并可以相應地調整其設計和布局。
在本教程中，我們將學習如何使用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;}
}
現在我們已經成功構建了響應式布局，上述布局將自動適應不同的屏幕尺寸。
謝謝你的閱讀。
將您的查詢和反饋發送在下面評論您的問題。
另外，別忘了訂閱我們的簡書。
如果你喜歡這篇文章，那么請分享一下，幫助我們成長。
