移動端流式佈局

移動端流失佈局

1. 移動端調試方法

   • Chrome Devtools（谷歌瀏覽器）的模擬手機調試
   • 搭建本地web伺服器，手機和伺服器一個區域網內，通過手機訪問伺服器
   • 使用外網伺服器，直接ip或功能變數名稱訪問

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

   • 佈局視口layout viewport

     • 一般移動設備的瀏覽器都是預設設置了一個佈局視口，用於解決早期的PC端頁面在手機上顯示的問題
     • IOS\Android基本都將這個視口解析度設置為989px，所以PC上網頁大多都能在手機上呈現，只不過元素看上去很小，一般預設可以通過手動縮放網頁

   • 視覺視口 visual viewport

     • 字面意思，他是用戶正在看到的網站的區域。註意：是網站的區域
     • 我們可以通過縮放去操作視覺視口，但不會影響視口，佈局視口仍保持原來的寬度

   • 理想視口ideal viewport

     • 為了是網站在移動端有最理想的瀏覽和閱讀寬度而設定
     • 理想視口，對設備來講，是最理想的視口尺寸
     • 需要手動填寫meta視口標簽通知瀏覽器操作
     • meta視口標簽的主要目的：佈局視口的寬度應該與理想視口的寬度一致，簡單理解就是設備有多寬。我們佈局的視口就有多寬

   • meta視口標簽

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

       屬性	解釋說明
       width	寬度設置的是viewport寬度，可以設置device-width特殊值
       initial-scale	初始縮放比，大於0的數字
       maximum-scale	最大縮放比，大於0的數字
       minimum-scale	最小縮放比
       user-scalable	用戶是否可以縮放，yes或者no（1或0）

     • 標準的viewport設置

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

3. 二倍圖

   • 物理像素點指的是屏幕顯示的最小顆粒，是物理真實存在。這是廠商在出廠時就設置好了，比如蘋果6\7\8是750*1334

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

   • PC端頁面，1個px等於1個物理像素的，但是移動端就不盡相同

   • 一個px的能顯示的物理像素點的個數，稱為物理像素比或屏幕像素比

   • 背景縮放 background-size

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

     • background-size：背景圖片寬度  背景圖片高度；

       屬性	說明
       單位	長度|百分比|cover|contain
       cover	把背景圖片擴展至足夠大，以使背景圖片完全覆蓋北京區域
       contain	把背景圖像擴展至最大尺寸，以使齊寬度和高度完全適應內容區域

4. 物理像素&物理像素比

   • PC端和早期的手機屏幕/普通手機屏幕：1CSS像素=1物理像素
   • Retine(視網膜屏幕)是一種顯示技術，可以將把更多的物理像素壓縮至一塊屏幕里，從而達到更高的解析度，並提高屏幕顯示的細膩程度

5. 多倍圖

   • 對於一張50px*50px的圖片，在手機Retina屏中打開，按照剛纔的物理像素比會放大倍數造成圖片模糊
   • 在標準的viewport設置，使用倍圖來提高圖片質量，解決在高清設備中的模糊問題
   • 通常使用二倍圖，因為IPhone6/7/8的影響，但是現在還存在3倍圖4倍圖的情況，這個看實際來發公司需求
   • 背景圖片 註意縮放問題

6. 移動端主流方案

   • 單獨製作移動端頁面（主流）
     • 京東商城手機版
     • 淘寶觸屏版
     • 蘇寧易購手機版
     • 通常情況下，網址功能變數名稱前面加m（mobile）可以打開移動端。通過判斷設備，如果是移動設備打開，則跳移動端頁面
   • 響應式頁面相容移動端
     • 三星手機官網
     • 通過判斷屏幕寬度來改變樣式，以適應不同終端
     • 缺點：
       • 製作麻煩，需要花費很大的精力調相容性問題

7. 移動端技術解決方案

   • 移動端瀏覽器

     • 移動端瀏覽器基本以webkit內核為主，因此我們就考慮webkit相容問題
     • 我們可以放心使用H5標簽和CSS樣式
     • 同時我們瀏覽器的私有首碼我們只需要考慮添加wenkit即可

   • CSS初始化normalize.css

     • 移動端CSS初始化推薦使用normalize.css
       • Normalize.css:保護了有價值的預設值
       • Normalize.css:修複了瀏覽器的bug
       • Normalize.css:是模塊化
       • Normalize.css：擁有詳細的文檔

   • 特殊樣式

     • /**CSS3盒子模型/
       box-sizing:border-box;
       -webkit-box-sizing:border-box;
       /*點擊高亮我們需要清除  */
       -webkit-appearance:none;
       /*禁用長安頁面時的彈出菜單*/
       ima,a{
       -webkit-touch-callout:none;
       }

8. 移動端技術選型

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