移動web開發流式佈局

1.0 移動端基礎

1.1瀏覽器現狀

PC端常見瀏覽器：360瀏覽器、谷歌瀏覽器、火狐瀏覽器、QQ瀏覽器、百度瀏覽器、搜狗瀏覽器、IE瀏覽器。

移動端常見瀏覽器：UC瀏覽器，QQ瀏覽器，歐朋瀏覽器，百度手機瀏覽器，360安全瀏覽器，谷歌瀏覽器，搜狗手機瀏覽器，獵豹瀏覽器，以及其他雜牌瀏覽器。

國內的UC和QQ，百度等手機瀏覽器都是根據Webkit修改過來的核心，國內尚無自主研發的核心，就像國內的手機作業系統都是基於Android修改開發的一樣。

總結：相容移動端主流瀏覽器，處理Webkit核心瀏覽器即可。

1.2 手機螢幕的現狀

• 移動端裝置螢幕尺寸非常多，碎片化嚴重。
• Android裝置有多種解析度：480x800, 480x854, 540x960, 720x1280，1080x1920等，還有傳說中的2K，4k屏。
• 近年來iPhone的碎片化也加劇了，其裝置的主要解析度有：640x960, 640x1136, 750x1334, 1242x2208等。
• 作為開發者無需關注這些解析度，因為我們常用的尺寸單位是 px 。

1.3常見移動端螢幕尺寸

1.4移動端除錯方法

• Chrome DevTools（谷歌瀏覽器）的模擬手機除錯
• 搭建本地web伺服器，手機和伺服器一個區域網內，通過手機訪問伺服器
• 使用外網伺服器，直接IP或域名訪問

2.0 視口

視口（viewport）就是瀏覽器顯示頁面內容的螢幕區域。 視口可以分為佈局視口、視覺視口和理想視口

2.1 佈局視口 layout viewport

一般移動裝置的瀏覽器都預設設定了一個佈局視口，用於解決早期的PC端頁面在手機上顯示的問題。

iOS, Android基本都將這個視口解析度設定為 980px，所以PC上的網頁大多都能在手機上呈現，只不過元素看上去很小，一般預設可以通過手動縮放網頁。

2.2視覺視口 visual viewport

字面意思，它是使用者正在看到的網站的區域。注意：是網站的區域。

我們可以通過縮放去操作視覺視口，但不會影響佈局視口，佈局視口仍保持原來的寬度。

2.3理想視口 ideal viewport

為了使網站在移動端有最理想的瀏覽和閱讀寬度而設定

理想視口，對裝置來講，是最理想的視口尺寸

需要手動添寫meta視口標籤通知瀏覽器操作

meta視口標籤的主要目的：佈局視口的寬度應該與理想視口的寬度一致，簡單理解就是裝置有多寬，我們佈局的視口就多寬

總結：我們開發最終會用理想視口，而理想視口就是將佈局視口的寬度修改為視覺視口

2.4meta標籤

最標準的viewport設定

• 視口寬度和裝置保持一致
• 視口的預設縮放比例1.0
• 不允許使用者自行縮放
• 最大允許的縮放比例1.0
• 最小允許的縮放比例1.0

3.0二倍圖

3.1物理畫素&物理畫素比

物理畫素點指的是螢幕顯示的最小顆粒，是物理真實存在的。這是廠商在出廠時就設定好了,比如蘋果6 是 750* 1334

我們開發時候的1px 不是一定等於1個物理畫素的

一個px的能顯示的物理畫素點的個數，稱為物理畫素比或螢幕畫素比

如果把1張100*100的圖片放到手機裡面會按照物理畫素比給我們縮放

lRetina（視網膜螢幕）是一種顯示技術，可以將把更多的物理畫素點壓縮至一塊螢幕裡，從而達到更高的解析度，並提高螢幕顯示的細膩程度。

對於一張 50px * 50px 的圖片,在手機或 Retina 屏中開啟，按照剛才的物理畫素比會放大倍數，這樣會造成圖片模糊

在標準的viewport設定中，使用倍圖來提高圖片質量，解決在高清裝置中的模糊問題

通常使用二倍圖， 因為iPhone 6 的影響背景圖片 注意縮放問題

3.2背景縮放background-size

background-size 屬性規定背景影象的尺寸

background-size: 背景圖片寬度 背景圖片高度;

單位： 長度|百分比|cover|contain;

cover把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域。

contain把影象影象擴充套件至最大尺寸，以使其寬度和高度完全適應內容區域

4.0 移動開發選擇和技術解決方案

4.1移動端主流方案

1.單獨製作移動端頁面（主流）

通常情況下，網址域名前面加 m(mobile)
可以開啟移動端。通過判斷裝置，如果是移動裝置開啟，則跳到移動端頁面。

也就是說，PC端和移動端為兩套網站，pc端是pc斷的樣式，移動端在寫一套，專門針對移動端適配的一套網站

京東pc端：

京東移動端：

2.響應式頁面相容移動端（其次）

響應式網站：即pc和移動端共用一套網站，只不過在不同螢幕下，樣式會自動適配

4.2 移動端技術解決方案

1.移動端瀏覽器相容問題

移動端瀏覽器基本以 webkit 核心為主，因此我們就考慮webkit相容性問題。

我們可以放心使用 H5 標籤和 CSS3 樣式。

同時我們瀏覽器的私有字首我們只需要考慮新增 webkit 即可

2.移動端公共樣式

移動端 CSS 初始化推薦使用 normalize.css/

Normalize.css：保護了有價值的預設值

Normalize.css：修復了瀏覽器的bug

Normalize.css：是模組化的

Normalize.css：擁有詳細的文件

官網地址： http://necolas.github.io/normalize.css/

4.3 移動端大量使用 CSS3盒子模型box-sizin

傳統模式寬度計算：盒子的寬度 = CSS中設定的width + border + padding

CSS3盒子模型： 盒子的寬度= CSS中設定的寬度width 裡面包含了 border 和 padding

也就是說，我們的CSS3中的盒子模型， padding 和 border 不會撐大盒子了

/*CSS3盒子模型*/
box-sizing: border-box;
/*傳統盒子模型*/
box-sizing: content-box;

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

PC端如果完全需要相容，我們就用傳統模式，如果不考慮相容性，我們就選擇 CSS3 盒子模型

4.4移動端特殊樣式

    /*CSS3盒子模型*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*點選高亮我們需要清除清除  設定為transparent 完成透明*/
    -webkit-tap-highlight-color: transparent;
    /*在移動端瀏覽器預設的外觀在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式*/
    -webkit-appearance: none;
    /*禁用長按頁面時的彈出選單*/
    img,a { -webkit-touch-callout: none; }

5.0移動端常見佈局

移動端單獨製作

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

響應式

• 媒體查詢
• bootstarp

流式佈局：

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

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

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

移動web開發——flex佈局

1.0傳統佈局和flex佈局對比

1.1傳統佈局

• 相容性好
• 佈局繁瑣
• 侷限性，不能再移動端很好的佈局

1.2 flex佈局

• 操作方便，佈局極其簡單，移動端使用比較廣泛
• pc端瀏覽器支援情況比較差
• IE11或更低版本不支援flex或僅支援部分

1.3 建議

• 如果是pc端頁面佈局，還是採用傳統方式
• 如果是移動端或者是不考慮相容的pc則採用flex

2.0 flex佈局原理

• flex 是 flexible Box 的縮寫，意為"彈性佈局"，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 flex 佈局。
• 當我們為父盒子設為 flex 佈局以後，子元素的 float、clear 和 vertical-align 屬性將失效。
• flex佈局又叫伸縮佈局 、彈性佈局 、伸縮盒佈局 、彈性盒佈局
• 採用 Flex 佈局的元素，稱為 Flex 容器（flex

container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 專案（flex
item），簡稱"專案"。

總結：就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式

3.0 父項常見屬性

• flex-direction：設定主軸的方向
• justify-content：設定主軸上的子元素排列方式
• flex-wrap：設定子元素是否換行
• align-content：設定側軸上的子元素的排列方式（多行）
• align-items：設定側軸上的子元素排列方式（單行）
• flex-flow：複合屬性，相當於同時設定了 flex-direction 和 flex-wrap

3.1 flex-direction設定主軸的方向

• 在 flex 佈局中，是分為主軸和側軸兩個方向，同樣的叫法有 ： 行和列、x 軸和y 軸
• 預設主軸方向就是 x 軸方向，水平向右
• 預設側軸方向就是 y 軸方向，水平向下

• 注意： 主軸和側軸是會變化的，就看 flex-direction 設定誰為主軸，剩下的就是側軸。而我們的子元素是跟著主軸來排列的

​

3.2 justify-content 設定主軸上的子元素排列方式

3.3 flex-wrap設定是否換行

• 預設情況下，專案都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，flex佈局中預設是不換行的。
• nowrap 不換行
• wrap 換行

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

• 該屬性是控制子項在側軸（預設是y軸）上的排列方式 在子項為單項（單行）的時候使用
• flex-start 從頭部開始
• flex-end 從尾部開始
• center 居中顯示
• stretch 拉伸

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

設定子項在側軸上的排列方式 並且只能用於子項出現 換行 的情況（多行），在單行下是沒有效果的。

3.6 align-content 和align-items區別

• align-items 適用於單行情況下， 只有上對齊、下對齊、居中和 拉伸
• align-content適應於換行（多行）的情況下（單行情況下無效）， 可以設定 上對齊、下對齊、居中、拉伸以及平均分配剩餘空間等屬性值。
• 總結就是單行找align-items 多行找 align-content

3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的複合屬性

flex-flow:row wrap;

4.0 flex佈局子項常見屬性

• flex子專案佔的份數
• align-self控制子項自己在側軸的排列方式
• order屬性定義子項的排列順序（前後順序）

4.1 flex 屬性

flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。

.item {
    flex: <number>; /* 預設值 0 */
}

4.2 align-self控制子項自己在側軸上的排列方式

align-self 屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋 align-items 屬性。

預設值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch。

span:nth-child(2) {
      /* 設定自己在側軸上的排列方式 */
      align-self: flex-end;
}

4.3 order 屬性定義專案的排列順序

數值越小，排列越靠前，預設為0。

注意：和 z-index 不一樣。

.item {
    order: <number>;
}

5.0 攜程網首頁案例製作

攜程網連結：http://m.ctrip.com

1.技術選型

方案：我們採取單獨製作移動頁面方案

技術：佈局採取flex佈局

2.搭建相關資料夾

3.設定視口標籤以及引入初始化樣式

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

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

4.常用初始化樣式

body {
  max-width: 540px;
  min-width: 320px;
  margin: 0 auto;
  font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
  color: #000;
  background: #f2f2f2;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

5.模組名字劃分