移動Web - 響應式布局開篇

標籤：

用到的工具：

• FireFox瀏覽器
• Sublime Text 2

響應式布局定義：2010年，Ethan Marcotte提出，可查看原文；
通俗地講就是：百份比布局，根據不同裝置顯示不同布局；這次主要解決：傳統的固定像數(px)相比：

• 不同顯示裝置，使用不同布局。例如：PC螢幕，顯示3欄；手機，顯示為1欄；用到media query(媒體查詢)，它的用法，例如：
• @media screen and (min-width: 481px) ：螢幕最小481px，即大於481px適用；
• @media screen and (max-width: 480px) ：螢幕最大480px，即小於480px適用；
• @media print and (monochrome)：印表機，黑白，適用；
• 寬度使用百份比，橫屏與豎屏會自動調整；

先看看原始素材的效果，原始素材下載：PC螢幕，3欄顯示如下：手機屏，顯示不全： 先看看html的結構：CSS裡對應使用固定像數，這為了簡單，只關注布局相關的CSS: 實現PC顯示3欄，手機顯示1欄的CSS：

.header {background:url(images/w.png) no-repeat;height: 200px;}.navigation {min-height: 25px;}.header, .navigation, .footer {clear: both;} @media screen and (min-width: 481px){body, .header, .navigation, .footer {width: 960px;}.column {margin: 10px 10px 0 0;}.navigation ul li {width: 320px; /* 960/3 */}#visit {width: 240px;float: left;}#points {width: 240px;float: right;}#main {margin: 10px 260px 0 250px;width: 460px;}}@media screen and (max-width: 480px){body, .header, .navigation, .footer {width: 320px;}.column {margin: 10px 0;/*紅色分割線*/border-bottom: 1px dashed red;}.navigation ul li {width: 106.67px; /* 320/3 */}#visit,#points,#main {width: 320px;}}

PC顯示效果沒變；手機顯示效果，變為了1欄，豎向滾動，這就是移動Web開始。這裡出現了橫向捲軸，因為圖片撐大了。最後一步，將裡面的寬度像數轉為百份比，並控製圖片大小不撐大父元素：

.header {background:url(images/w.png) no-repeat;height: 200px;}.navigation {min-height: 25px;}.header, .navigation, .footer {clear: both;} @media screen and (min-width: 481px){body, .header, .navigation, .footer {width: 100%;}.column {margin: 10px 1.042% 0 0;}.navigation ul li {width: 33.33%; /* 960/3 */}#visit {width: 25%;float: left;}#points {width: 25%;float: right;}#main {margin: 10px 27.083% 0 26.042%;width: 47.92%;}}  @media screen and (max-width: 480px){body, .header, .navigation, .footer {width: 100%;}.column {margin: 10px 0;border-bottom: 1px dashed red;}.navigation ul li {width: 33.33%; /* 320/3 */}#visit,#points,#main {width: 100%;}}img, object{max-width: 100%;}

手機橫屏效果：全文完！ 

移動Web - 響應式布局開篇