第一步，打開電腦中安裝的Sublime Text3，新建demo文件夾用來存放文件，在里面新建一個HTML文件，通過Tab快捷鍵迅速創建一個HTML模板，並命名標題。
第二步，在Body標簽里添加三個主DIV標簽，分別表示頭部，內容和底部。然后，在內容DIV內又添加三個子DIV,分別表示左邊，中間，右邊。並且給出對應的ID名。對應的代碼如下：
<body>
<div id="header">頭部</div>
<div id="main">
<div id="main-left">內容-左邊</div>
<div id="main-center">內容-中間</div>
<div id="main-right">內容-右邊</div>
</div>
<div id="footer">底部</div>
</body>
第三步， 接下來是實現響應式布局的關鍵CSS代碼內容了，寫CSS來實現響應式布局。 通過在head頭部添加<style>標簽，在里面寫CSS代碼（當然，也可以將CSS代碼寫在單獨的.CSS文件中，然后引用）。首先設置全局樣式，當屏幕寬度大於900px的時候，即大型電腦PC端，對應的頭部，尾部，內容的CSS代碼，對應的代碼如下：
*
{
padding:0px;
margin:0px;
font-family:"微軟雅黑";
}
#header
{
height:100px;
border:solid 1px red;
margin:0px auto;
}
#main
{
margin:10px auto;
height:400px;
}
#footer
{
margin:0px auto;
height:100px;
border:solid 1px red;
}
第四步，當屏幕最小寬度為900px時，相當於筆記本PC端，其對應的頭部、尾部，內容以及內容內部包含部分的CSS代碼，對應的代碼如下：
@media screen and (min-width:900px)
{
#header,#footer
{
width:800px;
}
#main
{
width:800px;
height:400px;
}
#main-left
{
width:200px;
height:400px;
border:solid 1px red;
float:left; /*以下均要設置左浮動，保證在同一行*/
}
#main-center
{
width:394px;
height:400px;
border:solid 1px red;
float:left;
}
#main-right
{
width:200px;
height:400px;
border:solid 1px red;
float:left;
}
}
第五步，當屏幕寬度在600~900px時，相當於平板電腦大小的設備，其對應的頭部、尾部，內容以及內容內部包含部分的CSS代碼，對應的代碼如下：
@media screen and (min-width:600px) and (max-width:900px)
{
#header,#footer
{
width:600px;
}
#main
{
width:600px;
height:400px;;
}
#main-left
{
width:200px;
height:400px;
border:solid 1px red;
float:left; /*以下均要設置左浮動，保證在同一行*/
}
#main-center
{
width:396px;
height:400px;
border:solid 1px red;
float:left;
}
#main-right
{
display:none; /*隱藏內容右邊*/
}
}
第六步， 寫當屏幕寬度在小於等於600px時，即在移動端（手機端），其對應的頭部、尾部，內容以及內容內部包含部分的CSS代碼，對應的代碼如下：
@media screen and (max-width:600px)
{
#header,#footer
{
width:300px;
}
#main
{
width:300px;
height:400px;
}
#main-left
{
display:none; /*隱藏內容左邊*/
}
#main-center
{
width:300px;
height:400px;
border:solid 1px red;
}
#main-right
{
display:none; /*隱藏內容右邊*/
}
}
最后說一下，其實也就相當於判斷語句，判斷屏幕寬度根據屏幕的寬度來設置相應的寬度，這里設置寬度個人寫完后覺得用百分比來設置其實還要簡單點，看情況吧。
=。=