01移動端佈局基礎之流式佈局

技術交流QQ羣:1027579432，歡迎你的加入！

1.移動端基礎

• 瀏覽器現狀
  • PC端常見瀏覽器：360瀏覽器、谷歌瀏覽器、火狐瀏覽器、QQ瀏覽器、百度瀏覽器、搜狗瀏覽器、IE瀏覽器等。
    移動端常見瀏覽器：UC瀏覽器、QQ瀏覽器、歐朋瀏覽器、百度手機瀏覽器等。
• 國內的UC、QQ、百度等手機瀏覽器都是根據Webkit修改過來的內核，國內尚無自主研發的內核，就像國內的手機操做系統都是基於安卓修改開發的同樣。
• 總結：兼容移動端主流瀏覽器，處理Webkit內核瀏覽器便可。
• 手機屏幕現狀
  • 移動端設備屏幕尺寸很是多，碎片化嚴重；
  • Android設備有多種分辨率：480*480、480*85四、720*1280、1080*1920等；
  • 做爲開發者無需關注這些分辨率，由於經常使用的尺寸單位是px；
• 常見移動端屏幕尺寸
  
• 移動端調試方法
  • Chrome DevTools(谷歌瀏覽器)的模擬手機調試；
  • 搭建本地web服務器，手機和服務器在一個局域網內，經過手機訪問服務器；
  • 使用外網服務器，直接IP或域名訪問；

2.視口

• 視口：瀏覽器顯示頁面內容的屏幕區域，視口能夠分爲佈局視口、視覺視口、理想視口。
• 佈局視口layout viewport
  
  • 通常移動設備的瀏覽器都默認設置了一個佈局視口，用於解決早期PC端頁面在手機上顯示的問題；
  • IOS、Android基本都將這個視口分辨率設置爲980px，因此PC上的網頁大多都能在手機上呈現，只不過元素看上去很小，通常默承認以經過手動縮放網頁；
• 視覺視口visual viewport
  
  • 它是用戶正在看到的網站的區域。注意：是網站的區域；
  • 咱們能夠經過縮放去操做視覺視口，但不會影響佈局視口，佈局視口仍然保持原來的寬度；
• 理想視口ideal viewport
  • 爲了使網站能在移動端有最理想的瀏覽和閱讀寬度而設定；
  • 理想視口，對設備來講，是最理論的視口尺寸；
  • 須要手動添加meta視口標籤通知瀏覽器操做；
  • meta視口標籤主要目的：佈局視口的寬度應該與理想視口的寬度一致，簡單理解就是設備有多寬，佈局視口就要有多寬。

3.meta視口標籤

• 語法格式：

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

• 標準的viewport設置
  • 視口寬度和設備保持一致；
  • 視口的默認縮放比例1.0；
  • 不容許用戶自行縮放；
  • 最大容許的縮放比例1.0；
  • 最小容許的縮放比例1.0；

4.二倍圖

• 物理像素和物理像素比
  • 物理像素指的是屏幕顯示的最小顆粒，是物理中真實存在的。這是廠商在出廠時就設置好了。例如蘋果手機的750*1334；
  • 開發時的1px不是必定等於1個物理像素的；
  • PC端頁面中，1px等於1個物理像素的，可是移動端就不盡相同；
  • 1px能顯示的物理像素點的個數，稱爲物理像素比或屏幕像素比；

5.多倍圖

• PC端和手機端的手機屏幕/普通手機屏幕：1CSS像素=1物理像素
• Retina(視網膜屏幕)是一種顯示技術，能夠把更多的物理像素點壓縮至一塊屏幕中，從而達到更高的分辨率，並提升屏幕顯示的細膩程度。
  
• 對於一張50px*50px的圖片，在手機Retina屏中打開，按照剛纔的物理像素比會放大倍數，這樣會形成圖片模糊；
• 在標準的viewport設置中，使用倍圖來提升圖片的質量，解決在高清設備中的模糊問題；
• 一般使用二倍圖，由於iphone8的影響，可是如今還存在3倍圖、4倍圖的狀況，這個根據實際開發需求；
• 背景圖片，注意縮放問題；

6.背景縮放background-size

• background-size屬性規定了背景圖像的尺寸；
• 語法格式：

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

• 單位：長度或百分比或cover或contain；
• cover把背景圖像擴展足夠大，從而使背景圖像徹底覆蓋背景區域；
• contain把背景圖像擴展到最大尺寸，從而使寬度和高度徹底適應內容區域；
• 多倍圖切圖cutterman
  • @1*1倍圖原圖
  • @2*2倍圖
  • @3*3倍圖

7.移動端開發選擇

• a.單獨製做移動端頁面(主流)：一般狀況下，網址域名前面加m(mobile)能夠打開移動端。經過判斷設備，若是是移動設備打開，則跳動移動端頁面。
  • 京東商城手機版
  • 淘寶觸屏版
  • 蘇寧易購手機版
• b.響應式頁面兼容移動端(其次)：經過判斷屏幕寬度改變樣式，以適應不一樣終端。缺點：製做麻煩，須要花不少精力去調兼容性問題。
  • 三星手機官網

8.移動端技術解決方案

• 移動端瀏覽器
  • 移動端瀏覽器基本以webkit內核爲主，所以就須要考慮webkit兼容性問題；
  • 能夠放心使用H5標籤和CSS3樣式；
  • 同時，咱們瀏覽器的私有前綴只須要考慮添加webkit便可；
• CSS樣式初始化normalize.css
  • 移動端CSS初始化推薦使用normalize.css；
• CSS盒子模型box-sizing
  • 傳統模式寬度計算：盒子的寬度 = CSS中設置的width + border + padding；
  • CSS3盒子模型：盒子的寬度 = CSS中設置的寬度width裏面包含了border和padding。即CSS3中的盒子模型，padding和border不會撐大盒子；

  <!-- CSS3盒子模型 -->
  box-sizing: border-box;
  <!-- 傳統盒子模型 -->
  box-sizing: content-box;

  • 移動端能夠所有使用CSS3盒子模型；
  • PC端若是徹底須要兼容，就使用傳統盒子模型；若是不考慮兼容性，就選擇CSS3盒子模型；

9.特殊樣式

<!-- CSS盒子模型 -->
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;}

10.移動端常見佈局

• 移動端佈局和PC端有所區別：
  • a.單獨製做移動端頁面(主流)
    • 流式佈局(百分比佈局)
    • flex彈性佈局(強烈推薦)
    • less+rem+媒體查詢佈局
    • 混合佈局
  • b.響應式頁面兼容移動端(其次)
    • 媒體查詢
    • bootstarp

11.移動端佈局之流式佈局

• 流式佈局，就是百分比佈局，也稱爲非固定像素佈局；
• 經過盒子的寬度設置成百分比來根據屏幕的寬度進行伸縮，不受固定像素的限制，內容向兩側填充；
• 流式佈局方式是移動web開發中使用的比較常見的佈局方式；
• max-width 最大寬度(max-height 最大高度)
• min-width 最小寬度 (min-height 最小高度)