網站首頁健康小知識母嬰教育起名運動知識職場理財情感生活綠色生活遊戲數碼美容特色美食愛好

怎樣用CSS製作響應式佈局

欄目: 互聯網 / 發佈於: / 人氣:2.77W

現階段，隨着互聯網的發展，人們瀏覽網頁的方式也不僅僅是在電腦PC端了，而更多的是移動端用户。因此，前端開發者面臨的問題是，應該怎樣開發出適應不同用户的瀏覽體驗的網頁呢？響應式佈局因此應運而生。
響應式佈局，顧名思義，即為適應不同終端而形成的一種技術。下面，小編通過自己的，以一個簡單的例子來為大家介紹前端怎樣用
CSS製作響應式佈局。

操作方法

（01）前端用到的編輯器有很多，本例通過選擇Sublime Text3編輯器來製作響應式佈局。本例選擇製作一個簡單的包含頭部、中間內容、尾部的佈局頁面。第一步，打開電腦中安裝的Sublime Text3，新建demo文件夾用來存放文件，在裏面新建一個HTML文件，通過Tab快捷鍵迅速創建一個HTML模板，並命名標題。如圖所示：

（02）第二步，在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>

（03）第三步，接下來是實現響應式佈局的關鍵CSS代碼內容了，寫CSS來實現響應式佈局。通過在head頭部添加<style>標籤，在裏面寫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;}

（04）第四步，當屏幕最小寬度為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;}}

（05）第五步，當屏幕寬度在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; /*隱藏內容右邊*/}}

（06）第六步，寫當屏幕寬度在小於等於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; /*隱藏內容右邊*/}}

（07）最後，在瀏覽器中查看效果（其實每寫完一步代碼就應該查看效果，即調試），如圖。如果要切換至手機端，可以藉助Google Chrome瀏覽器來查看，按F12,點擊圖上按鈕，於是就可以看到簡單的響應式佈局了。如圖：附：本經驗關鍵詞：html（CSS）響應式佈局怎麼寫、html（CSS）製作響應式佈局代碼、css實現響應式佈局代碼、前端響應式佈局如何實現、開發響應式佈局、響應式佈局實現方法、Sublime Text3製作響應式佈局更多關於HTML/CSS的經驗請點擊下面的“經驗引用”

Tags：CSS 響應佈局