移動web開發之流式佈局

流式佈局（百分比佈局）

• 流式佈局就是百分比佈局，也稱非固定像素佈局。

• 經過盒子寬度設置成百分比來根據屏幕的寬度來進行伸縮，不受固定像素限制，內容向兩側填充。

• 流式佈局方式是移動web開發使用的比較常見的佈局方式

• max-width 最大寬度（max-height 最大高度）

• min-width 最小寬度（min-hight 最小高度）

京東首頁案例   

注意：裏面的圖片默認和文字基線對齊，注意要添加vertical-align: middle; 讓圖片和文字中線對齊，解決圖片底部留白問題。

 

 

部分重要代碼：

 

 

<!-- 首先添加meta  viewport屬性 設置視口 -->

    <meta name="viewport"  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

初始化body樣式

body {

/* 讓body和設備同樣寬 */

    width: 100%;

    margin: 0 auto;

  /* 給定最大寬度 */

    max-width: 640px;

    /* 給定最小寬度 */

    min-width: 320px;

    font: 14px/1.5 -apple-system, Helvetica, sans-serif;

    color: #666;

}

 

盒子用百分比給寬度

 

.app ul li:nth-child(1) {

    width: 8%;

}

.app ul li:nth-child(2) {

    width: 10%;

}

.app ul li:nth-child(3) {

    width: 57%;

}

.app ul li:nth-child(4) {

    width: 25%;

    background-color: #f63515;

}

 

/* 搜索模塊 */

.search-wrap {

    position: fixed;

     /* 解決子盒子.search外邊距合併問題 */

    overflow: hidden;

    height: 44px;

     /* 固定定位的盒子需給定寬度 ，且給百分比需在必定範圍內*/

    width: 100%;

    max-width: 640px;

    min-width: 320px;

}

/* 左右兩個盒子用定位 不佔位置*/

.search-wrap .search-btn,

.search-wrap .search-login {

    position: absolute;

    top: 0;

    width: 40px;

    height: 44px;

}

.search-wrap .search-btn {

    left: 0;

}

.search-wrap .search-login {

    right: 0;

}

/* 使用僞元素添加小圖標 */

.search-wrap .search-btn::after {

    content: "";

    display: block;

    position: absolute;

    bottom: 12px;

    right: 6px;

    width: 20px;

    height: 18px;

    background: url(../images/s-btn.png) no-repeat;

     /* 背景圖縮放 */

    background-size: 20px 16px;

}

/* 中間盒子不給寬，左右margin值留出空白，使盒子能跟隨設備寬度伸縮 */

.search-wrap .search {

    position: relative;

    height: 30px;

    margin: 7px 50px 0;

    background-color: #fff;

    border-radius: 15px;

}

/* 放大鏡 */

.search-wrap .search .sou {

    position: absolute;

    top: 8px;

    left: 53px;

    width: 18px;

    height: 15px;

/* 二倍精靈圖技術，先縮放整張精靈圖後再量座標，代碼裏精靈圖尺寸也要縮放 */

    background: url(../images/jd-sprites.png) no-repeat -83px 0;

    background-size: 200px;

}

 

/* 主體內容 */

/* 滑動圖 */

.main-content .slider img {

    width: 100%;

}

/* 品牌日 */

.main-content .brand div {

    float: left;

    width: 33.33%;

}

.main-content .brand div img {

    width: 100%;

}

/* 導航模塊 */

.main-content .nav a {

    /* 添加浮動就不須要轉換行內塊 */

    float: left;

    width: 20%;

    text-align: center;

}

.main-content .nav a img {

    width: 40px;

    margin: 10px 0;

}

.main-content .nav a span {

    /* 轉換爲塊級元素，另起一行顯示 */

    display: block;

}