自適應寬度佈局

        在開始開發以前，首先規劃佈局是一件很重要的事。

        在個人大做業開發中，按照要求，須要有兩種佈局：寬窄屏切換。當屏幕分辨率大於1025px時，使用寬屏佈局；當屏幕寬度小於1025時，使用窄屏佈局。因而去研究了一下，發現原來css早已有樣式，直接實現，省去了不少工做。

        代碼以下：

<link rel="stylesheet" type="text/css" href="normalScreen.css" media="screen and (max-width: 1025px)" />
<link rel="stylesheet" type="text/css" href="widthScreen.css" media="screen and (min-width: 1025px)" />

        即，引入兩個不一樣的css文件。其中，normalScreen.css爲窄屏佈局，當屏幕寬度不大於1025px時使用；widthScreen.css爲寬屏佈局，當屏幕尺寸不小於1025px時使用。如上，已經一目瞭然了。接下來所要作的就是寫不一樣的css樣式便可。

        既然用到了佈局，順便去了解了一下幾種經常使用的佈局知識。

        1. 單列布局（非響應式）

        百度、新浪等網站都使用這種佈局方式。具體實現就是固定寬度（好比頁面寬度設爲1024px），而後居中顯示便可。

        2. 兩列布局（能夠看作響應式）

        使用float樣式。一列float:left; 另外一列floa:right;

<div class="left">我是左邊一列</div>
<div class="right">我是右邊一列</div>

.left{
    float:left;
}
.right{
    float:right;
}

        3. 三列布局

        使用absolute樣式。

<div class="left">我是左邊一列</div>
<div class="middle">我是中間一列</div>
<div class="right">我是右邊一列</div>

.left{
    position: absolute;
    left: 0;
    top: 0;
}
.middle{
    margin: 0 300px 0 300px;
}
.right{
    position: absolute;
    right: 0;
    top: 0;
}

        至關於左右兩列寬度固定，都爲300px，中間列左右邊距各爲300。

        4. 混合佈局

        一般是以上幾種佈局混合，即加上一個頭，一個尾，中間是三列布局。具體視狀況而定。