移動 Web 開發佈局（一）——流式佈局、flex佈局

目錄

一.移動端基礎

1.視口標籤

2.二倍圖

3.移動端技術解決方案

二.流式（百分比）佈局

三.flex（伸縮）佈局

1.flex佈局體驗

2.flex佈局原理

3.flex佈局父項常見屬性

4.flex佈局子項常見屬性

6.攜程移動端首頁製作

一.移動端基礎

移動端 web 開發現狀：移動端瀏覽器主要針對 webkit內核 做兼容，碎片化嚴重，手機分辨率和大小不一

1.視口標籤 <mate>

mate 定義：瀏覽器顯示頁面內容的區域，包括：佈局視口、視覺視口、理想視口，如下

佈局視口 layout viewport：讓PC網頁大多都能在手機上呈現，元素看上去很小，可以手動縮放網頁

視覺視口 visual viewport：正在看到的網站的區域

理想視口 ideal viewport：設備有多寬，佈局視口有多寬

總結：理想視口 = 將佈局視口的寬度修改爲視覺視口

mate 屬性：

width=device-width：寬度與設備寬度掛鉤

initial-scale=1.0：初始縮放比

maximum-scale / minimum-scale：最大縮放比 / 最小縮放比

user-scalable：用戶是否可以進行縮放，一般爲no
<meta name="viewport" content="width=device-width, initial-scale=1.0,
                            maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
2.二倍圖

2.1 物理像素 vs 二倍圖

物理像素點：即分辨率，屏幕顯示的最小顆粒，是真實存在的，廠商設定

物理像素比：一個 px 的能顯示的物理像素點的個數，即 1px 不一定等於一個物理像素

lRetina（視網膜屏幕）一種顯示技術，可以把更多的物理像素點壓縮至一塊屏幕裏，達到更高分辨率

iphone8 物理像素 750 ，1px 開發像素 = 2個物理像素，50*50（開發像素）在iphone8 中會被放大兩倍顯示

解決方案：準備100*100（開發像素）的圖片，手動縮小爲 50*50，放入iphone8 中就會變成原來的100*100

2.2 背景圖縮放

background-size: xx;：背景圖片寬度背景圖片高度；單位可爲 px 或者 %（相較於父盒子）

background-size: cover;：使背景圖像完全覆蓋背景區域，包括寬高兩部分都鋪滿 div

background-size: contain;：使背景圖像寬度或高度完全適應內容區域，不一定完全鋪滿 div

3.移動端技術解決方案

3.1 開發選擇

單獨製作移動端頁面（主流）：pc端、移動端兩套樣式

響應式頁面兼容移動端（其次）：pc端、移動端一套樣式自動適配

注意事項：

只考慮 webkit 兼容，瀏覽器的私有前綴只需要考慮添加 webkit

移動端公共樣式 normalize.css（融合在 bootstrap 中）

可以大量使用 H5C3 及 C3盒子模型

3.2 CSS3 盒子模型

box-sizing: content-box;（傳統盒子模型）：默認樣式，width+border+padding ，border 和 padding 會撐大盒子

box-sizing: border-box;（CSS3盒子模型）：border 和 padding 不會撐大盒子，需要單獨書寫

移動端可以全部CSS3 盒子模型

PC端如果需要兼容，用傳統模式；如果不考慮兼容性，選擇 CSS3 盒子模型

3.3 移動端特殊樣式

清除高亮，完全透明：-webkit-tap-highlight-color: transparent

修改按鈕和輸入框的默認樣式：-webkit-appearance: none

禁用長按時跳出菜單（圖片、超鏈接設置）：-webkit-touch-callout: none

3.4 移動端常見佈局

移動端單獨製作：

流式佈局（百分比）

flex彈性佈局（推薦）

Less + rem + 媒體查詢佈局

混合佈局

響應式：

媒體查詢

bootstarp

二.流式（百分比）佈局

1.流式佈局定義

流式佈局又名百分比佈局，通過 將寬度設定爲百分比 來適配屏幕變化，不再是固定像素

爲了保護內容在合理範圍內，需要設置 Max-width 最大寬以及 Min-width 最小寬
        section {  /* 會隨着屏幕寬度變化而改變佈局 */
            width: 100%;
            max-width: 980px;
            min-width: 320px;
        }
2.京東移動端首頁製作

2.1 準備工作

初始化基本文件夾：

index.html中，設置視口，引入基本公共樣式 + 自己的css樣式
<meta name="viewport" content="width=device-width, initial-scale=1.0, 
                    user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">  // 引入css初始化文件
<link rel="stylesheet" href="css/index.css">      // 引入自己寫的首頁的css
2.2 頂部製作

HTML結構：<header> 中包括四部分 ul-li，前兩個li 插入圖片，後兩個li 插入文字
    <header class="app">
        <ul>
            <li> <img src="" alt=""> </li>
            <li> <img src="" alt=""> </li>
            <li></li>
            <li></li>
        </ul>
    </header>
CSS樣式①：給頭部模塊指定高度，讓ul-li 浮動在一行上，設定 li中通用樣式（顏色、行高、居中等等）

CSS樣式②：給每個 li 設定 width 佔據的百分比，給 li 中的圖片指定單獨固定寬度，如：
app ul li:nth-child(2) {
    width: 10%;
}
.app ul li:nth-child(2) img {
    width: 30px;
    vertical-align: middle;
}
2.3 定位搜索製作

HTML結構①：搜索 div 中包含三個div：搜索按鈕、搜索框、登錄

HTML結構②：搜索框中包含兩個div：JD圖標、放大鏡圖標

CSS樣式①：搜索div應設置成定位 fixed，指定最大最小寬度保護內容，指定100%寬度+固定高度

CSS樣式②：搜索按鈕採用絕對定位，指定固定大小，用::before轉換爲塊元素，插入並縮放背景圖片，如：
.search-btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(../images/s-btn.png) no-repeat;
    background-size: 20px 18px;    /*背景圖片縮放大小應該和盒子一樣大 實際背景圖片比這個大*/
    margin: 14px 0 0 15px;
}
CSS樣式③：搜索框部分無需給定寬度，而是給margin，使之隨屏幕變化自適應，JD圖標背景縮放同前面

CSS樣式④：JD圖標後面的豎線，採用JD後面追加::after→絕對定位→塊元素→設定寬高顏色

CSS樣式⑤：精靈圖縮放：將精靈圖縮小成原來的x倍，測量對應的位置

2.4 主體部分

2.4.1 小家電品牌日製作

HTML結構：大 div 包含了三個小 div，點擊對應部分會進入不同頁面，採用插入鏈接圖片
 <div class="">
         <div> <a> <img src=""> </a> </div>
         <div> <a> <img src=""> </a> </div>
         <div> <a> <img src=""> </a> </div>
     </div>
CSS樣式：大 div 寬度33.33%，浮動起來，每個 div 對應的圖片寬度佔每個 div 的100%，注意清除浮動

2.4.2 nav製作

HTML結構：<nav> 中包含10個<a> <img> <span></span> </a>

CSS樣式：讓 a 元素浮動使之一行顯示，且每個寬度佔20%使多餘的自動換行

2.4.3 新聞模塊

HTML結構：div 中包含3個<a> <img> </a>

CSS樣式①：讓 a 元素浮動使之一行顯示，設定爲C3盒子模型，這樣設定邊框就不會輕易使 width 超過100%

CSS樣式②：分配 a 元素的 width 佔比 + 邊框思路：
.news a:nth-child(1) {
    width: 50%;
}
/* n+2 就是從從2個往後面選 */
.news a:nth-child(n+2) {
    width: 25%;
    border-left: 1px solid #ccc;
}
2.5 綜合效果展示

三.flex（伸縮）佈局

1.flex佈局體驗

傳統佈局：兼容性好，佈局繁瑣，侷限性：移動端不能很好佈局

flex佈局：簡單，操作方便，PC兼容性差，IE11或者更低版本不支持 flex

總結：PC採用傳統佈局，移動端或者不考慮兼容的PC，採用 flex佈局

2.flex佈局原理

flex佈局原理：給父盒子添加 flex 屬性，來控制子盒子的排列方式

爲父盒子設爲 flex佈局以後，子元素的 float、clear 和 vertical-align 屬性將失效

flex佈局又叫伸縮佈局、彈性佈局、伸縮盒佈局、彈性盒佈局

3.flex佈局父項常見屬性

flex-direction：設置主軸的方向

flex-wrap：設置子元素是否換行

flex-flow：複合屬性，相當於同時設置了 flex-direction 和 flex-wrap，flex-flow: column wrap;

justify-content：設置主軸上的子元素排列方式

align-content：設置側軸上的子元素的排列方式（多行）

align-items：設置側軸上的子元素排列方式（單行）

3.1 flex 設置主軸方向

flex佈局中默認主軸是 x軸，可以改變方向，子元素跟着主軸排列

flex-direction:column / row;將主軸改爲 y軸 / x軸，縱軸 / 橫軸

一定要給父元素添加：display:flex;

3.2 justify-content 設置主軸上子元素的排列

justify-content: flex-start / end：子元素在主軸頭部 / 尾部顯示

justify-content: center：子元素在主軸居中對齊。

justify-content: space-around：子元素平分剩餘空間。

justify-content: space-between：子元素先兩邊貼邊再平分剩餘空間。

3.3 flex-wrap 子元素是否換行

開啓 flex佈局後默認爲不換行flex-wrap:nowrap;，如果裝不開，會縮小子元素的寬度，放到父元素裏面

換行效果設置：flex-wrap:wrap;

3.4 align-items 設置側軸子元素排列（單行）

align-items 設置側軸元素對齊的方式，在子項爲單項（單行）的時候使用

align-items: flex-start / end 從頭 / 結尾開始

align-items: center;：居中顯示。

align-items: stretch;：將子元素拉伸，此時不可以設置子元素的高度，否則拉伸無效。

3.5 align-content 設置側軸子元素排列（多行）

align-content 設置側軸元素對齊的方式，在子項爲換行（多行）的情況下（單行情況下無效）使用

align-content: space-around;：平均分配剩餘空間。

align-content: space-between;：

align-content: center;：居中對齊。

4.flex佈局子項常見屬性

4.1 子項 flex屬性使用

flex：設置子元素剩餘空間所佔份數。 .item { flex：2; }

剩餘空間 = 父盒子的寬度 - 沒有設置 flex 的盒子的寬度

比例計算：當前子盒子的flex值 / 所有盒子 flex 總和
    


    p span {
            flex: 1;
        }      
        p span:nth-child(2) {
            flex: 2;
        }
4.2 align-self 單獨設置某個子盒子排列方式

align-self：單獨的設置某一個盒子的排列方式，可以覆蓋 align-items 屬性

exp： div span:nth-child(3) { align-self: flex-end; } 單獨使第三個盒子從底邊開始排。

4.3 order 定義子盒子排列順序

order：數值越小，排列越靠前，默認爲0。item { order：-1; }

exp： div span:nth-child(2) { order: -1; } 使得 span2 無視 html 結構排在 span1 的前面。

5 背景漸變 -webkit-linear-gradient（必寫私有前綴）
/* 背景漸變必須添加瀏覽器私有前綴 */
background: -webkit-linear-gradient(left, red, blue);     /*從左向右漸變*/
background: -webkit-linear-gradient(red, blue);     /*不寫方向 默認從上向下漸變*/
background: -webkit-linear-gradient(top left, red, blue);    /*從左上角到右下角漸變*/
6.攜程移動端首頁製作

6.0 方案技術

採取單獨製作移動端頁面的方案，使用 flex佈局技術

6.1 頂部固定搜索 search 製作

HTML結構：大 div 包含一個搜索框 div，一個裝 user 的 a 標籤。<div> <div></><a></> </>

CSS樣式①：父盒子設爲固定定位（因此一定要有寬度100%+最大最小寬度），高度固定

CSS樣式②：搜索框爲相對定位，有圓角、內容邊距、陰影等，佔剩餘部分份數爲1

CSS樣式③：搜索框中的放大鏡圖標，用::before 絕對定位，指定寬高，採用精靈圖當背景，記得二倍圖背景縮放

6.2 搜索模塊 user 製作
user 的樣式 width、height 均定死

左側搜索框伸縮，所以設置父元素 display：flex;，左側搜索框設置 flex：1;
.user::before：用於插入用戶頭像，指定寬高，精靈圖背景，二倍圖背景縮放
.user::before {
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    background: url(../images/sprite.png) no-repeat -59px -194px;
    background-size: 104px auto;
    margin: 4px auto -2px;
}
6.3 焦點圖 focus 模塊製作

HTML結構：div 中插入圖片

CSS樣式①：圖片 width:100% 就可以實現隨屏幕寬度變化而變化

6.4 局部導航欄 local-nav 製作

HTML結構：五個li，li 中包含 a，a 包含兩個 span 用於裝圖標和文字
<ul class="local-nav">
        <li> <a>
            <span class="local-nav-icon-icon1"></span>
            <span></span>
             </a> </li>  ...
CSS樣式①：5個li在一行平均分配，所以給父盒子設置 flex佈局，給 li 設置flex：1

CSS樣式②：li 裏的a，結構是上下顯示的圖標文字，所以給a開啓flex，並將主軸改爲縱軸，側軸居中對齊

CSS樣式③：a 裏的span，放圖標的統一類名前半部分，採取背景縮放設置整體樣式，再單獨設置，如：.
.local-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}
.local-nav li .local-nav-icon-icon2 {    /+針對每個不同的類名後綴改背景位置+/
    background-position: 0 -32px;
}
6.5 主導航欄 nav 製作

HTML結構：三行大div，每個大 div 中包含三列 div，每個列 div 包含數目不同的 a
 <div class="nav-common">  /*行div*/
            <div class="nav-items"><a></a></div>    /*列div*/
            <div class="nav-items"> <a></a><a></a> </div>
            <div class="nav-items"> <a></a><a></a> </div>
        </div>
CSS樣式①：行div 應設置固定高度以及 display:flex;，進而保證列div flex=1; 將行 div 平分成三份

CSS樣式②：列div 應設置display:flex，且設置主軸方向改變（因爲裏面的a縱向排列）
.nav-items {
    /* 不衝突的 */
    flex: 1;
    display: flex;
    flex-direction: column;
}
CSS樣式③：列div 中的a，應設置flex=1，保證平分列。文字陰影：text-shadow:1px 1px rgba(0, 0, 0, .2);

CSS樣式④：列div 中的第一個孩子 a 應該插入背景圖片
.nav-items:nth-child(1) a {
    background: url(../images/hotel.png) no-repeat bottom center;    /*背景定位*/
    background-size: 121px auto;    /*背景縮放*/
}
CSS樣式⑤：行div 中的第一個孩子（第一行）應單獨設置漸變背景
.nav-common:nth-child(1) {
    background: -webkit-linear-gradient(left, #FA5A55, #FA994D);
}
6.6 側導航欄 subnav-entry 製作

HTML結構：十組 li，每個 li 中包含 a，a中包含兩個 span 放圖標和文字
    <ul class="subnav-entry">
        <li><a href="#">
                <span class="subnav-entry-icon"></span>
                <span></span>
            </a> </li>  ...
CSS樣式①：大盒子應設置display:flex，換行（不換元素會縮小）

CSS樣式②：li 應設置爲 flex:20%;，這樣每五個佔滿100%，其餘換行

CSS樣式③：li 中的 a 應設置display:flex，改變主軸爲 y軸，側軸居中對齊

6.7 銷售模塊 sales-box 製作

HTML結構①：銷售模塊頭部，包含一個h2 標籤“熱門活動”，一個 a 標籤“獲取更多福利”

HTML結構②：銷售模塊身體，包含三行 div，每一行 div 包含兩個用 a 包裹的圖片

CSS樣式①：h2標籤強調重點：在h2 中輸入文字，縮進很多，超出部分隱藏，使瀏覽器能看到而用戶看不到
.sales-hd h2 {
    text-indent: -999px;
    overflow: hidden;
}
CSS樣式②： a 標籤後追加::after，添加>圖標
.more::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}
CSS樣式③：廣告一行row 父元素設置display:flex，子元素a設置爲 flex=1 保證平分row，圖片設爲width:100%

6.8 綜合效果展示