技術標籤：html5htmlcsscss3

移動端常用佈局方式

當移動端單獨製作時，使用傳統的佈局雖然相容性好，但是它的佈局繁瑣，且有侷限性，不能在移動端很好的佈局。所以很多時候我們可以藉助下面的幾個方式來幫助我們更好的佈局。
移動端常見佈局：

• 流式佈局（百分比佈局）
• flex 彈性佈局
• less+rem+媒體查詢佈局
• 混合佈局

響應式佈局：

• 媒體查詢
• bootstarp

今天我們先來認識一下百分比佈局和flex佈局

1.流式佈局：

流式佈局，就是百分比佈局，也稱非固定畫素佈局。通過盒子的寬度設定成百分比來根據螢幕的寬度來進行伸縮，不受固定畫素的限制，內容向兩側填充。流式佈局方式是移動web開發使用的比較常見的佈局方式。

    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

 <style>
        *
 
 {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 200px;
            height: 100px;
            margin: 50px auto;
        }
     ul li {
   /* 將盒子平均分成4份，每一份是1/4=25% */
            width: 25%;
            height: 100px;
            float: left;
            background-color
 
: darkkhaki;
            list-style: none;
        } 
        li:nth-child(2) {
            background-color: steelblue;
        }
        li:nth-child(3) {
            background-color: sandybrown;
        } 
        li:nth-child(4) {
            background-color: darkseagreen;
        }
    </style>

事實證明我們的說法是正確的。在實際開發中。百分比佈局用處是很大的，

比如上面京東頁面的這個導航欄，我們就可以分成3部分來寫，可以分別佔18%，20%，6 2%，具體資料可以自己算算。
百分比佈局很多時候搭配flex佈局以及less使用，為我們移動端頁面編寫節約了很多時間。