移動端流式佈局

移動端流失佈局

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 最大高度）