移動WEB開發-流式佈局（百分比佈局）

移動web開發流式佈局

1移動端基礎

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開發使用的比較常見的佈局方式。