移動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%;
}

手機橫屏效果：

全文完！