前端開發中常用的移動端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常見移動端屏幕尺寸

更多設備尺寸可以去該網站查看：https://material.io/resources/devices/

1.4移動端調試方法

Chrome DevTools（谷歌瀏覽器）的模擬手機調試
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-5vEttqwo-1581578201570)(C:\Users\蔣東輝\Desktop\1.jpg)]
搭建本地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.4 meta標籤

基本格式:

<meta name="viewport" content="key1=value1,key2=value2">

常見用法：

<meta name="viewport" content="width=320">
<meta name="viewport" content="width=device-width">
<!--viewport寬度等於設備寬度，縮放比爲1-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

更多說明：

最標準的viewport設置:

視口寬度和設備保持一致
視口的默認縮放比例1.0
不允許用戶自行縮放
最大允許的縮放比例1.0
最小允許的縮放比例1.0

3.0 二倍圖

3.1 物理像素&物理像素比

物理像素點指的是屏幕顯示的最小顆粒，是物理真實存在的。這是廠商在出廠時就設置好了,比如蘋果6 是 750* 1334，其實就是我們平時所說的屏幕分辨率。

我們平時開發的時候，使用的px單位也叫像素，不過這個並不是我們前面說的物理像素，它是一種邏輯像素。在PC端，一般一個物理像素和1px是一一對相應。不過在移動端開發時候的，1px並不一定等於1個物理像素的。

一個px的能顯示的物理像素點的個數，稱爲物理像素比或屏幕像素比，比如，iPhone6的屏幕分辨率是：750 x 1334，但是它的開發尺寸卻是：375px x 667px。那麼也就是說在iPhone6上，一個px能顯示2個物理像素，那麼它的物理像素比就是2。

<!--可以在PC模式和移動調試模式下查看區別-->
<style>
  .iPhone6{
    width: 375px;
    height: 667px;
    background-color: red;
  }    
</style>
<div class="iPhone6"></div>

其實早期的時候，物理像素和邏輯像素基本都是一一對應的，不過着科技的發展，人們可以將把更多的物理像素點壓縮至一塊屏幕裏，從而達到更高的分辨率，並提高屏幕顯示的細膩程度。比如：Retina（視網膜屏幕）顯示技術的出現。

因爲這個原因，如果把1張100x100物理像素的圖片放到手機裏面會按照物理像素比給我們縮放，也就是說，它的邏輯像素就是50x50。

對於文字或者一般的頁面元素，出現放大或者縮小，一般沒啥影響，不過對於圖片來說，就有可能出現問題了，我們平時使用的圖片一般都是在PC端處理好的位圖，位圖放大後會出現模糊的現象。對於一張PC 端爲 100 x 100 物理像素的圖片,在手機或 Retina 屏中打開（假設物理像素比爲2），它的邏輯像素應該是50x50，但是如果我們爲它設置的邏輯像素還是100x100的話，其最終顯示會按照剛纔的物理像素比會放大2倍，這樣就會造成圖片模糊。

因此在標準的viewport設置中，使用倍圖來提高圖片質量，解決在高清設備中的模糊問題，通常使用二倍圖，也有三倍四倍圖的情況。

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

3.2 背景縮放 `background-size`

background-size 屬性規定背景圖像的尺寸

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

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

cover把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域，長和寬都必須能覆蓋住盒子，不過有可能會有一方超出盒子。

contain把圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域，有可能出現部分區域覆蓋不住的情況。

對於多倍圖的切圖，可以使用photoshop中的cutterman來處理。

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

4.1 移動端主流方案

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

通常情況下，網址域名前面加 m(mobile) 可以打開其對應的移動端。通過判斷設備，如果是移動設備打開，則跳到移動端頁面。

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

京東pc端：

京東移動端：

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

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

4.2 移動端技術解決方案

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

移動端瀏覽器基本以 webkit 內核爲主， webkit內核對HTML5和CSS3支持的非常好，因此我們可以放心大膽的使用 H5 標籤和 CSS3 樣式。對於瀏覽器的私有前綴我們只需要考慮添加 webkit 即可。

2.移動端公共樣式

移動端 CSS 初始化（就是我們之前在PC端使用的css reset）推薦使用 normalize.css

Normalize.css有一些特點：

保護了有價值的默認值
修復了瀏覽器的bug
模塊化的
文檔詳細

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

4.3 CSS3盒子模型的選擇

我們之前知道盒子模型其實有兩種，一種是“W3C標準盒子模型”，另一種是“IE盒子模型（怪異盒子模型）”。關於這兩個盒子模型的區別可以參考下面的兩張圖：

/*怪異盒子模型， 需要手動設置*/
box-sizing: border-box;
/*標準盒子模型，默認爲此項*/
box-sizing: content-box;

4.4移動端特殊樣式

    /*盒子模型選擇*/
    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開發使用的比較常見的佈局方式。

通過盒子的寬度(width)設置成百分比來根據屏幕的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充。爲了不出現顯示意外，一般一起配合使用的還有min-width和max-width