[toc] ## 什么是響應式布局開發 讓我們開發完成的產品，能夠適配不同的設備屏幕：PC端(電腦)、PAD、PHONE(手機端) ## 當別人和你聊H5，他們想要聊的是什么？ 現在H5已經成為移動端開發(響應式布局)標準代名詞 ## 移動端發展史 ### native：native-app 智能生活(互聯網+) 離不開各種APP(應用)，這些應用離不開一代又一代的IT工程師 很久以前，APP開發和H5沒什么太大關系，都是由專業的APP開發團隊開發的 一般分為： - 安卓系統：JAVA(java-native) - IOS系統：C(object-c/swift) 我們把用上述語言開發的APP稱之為native app(原生APP) 這種開發方式的步驟一般為 >1. 本地開發，打包成安裝包，上傳到應用商店(App Store 是有審核期的，7天左右) >2. 用戶從應用商店下載安裝相關的APP，把當前APP源文件(源代碼)安裝在手機上，類似于在PC電腦上安裝一個軟件 > 好處在于： > native app可以直接操作手機內部的軟件或則硬件，(例如：通訊錄、攝像頭、相冊、重力感應器等)，因為它是直接運行在手機操作系統中的程序，因此進行操作和交互時，性能是比較不錯的(相對于H5，因為H5還要在它內部運行而不是直接在操作系統中) 這種開發方式的問題是： >手機操作系統不一樣，使用的技術也不一樣，所以需要兩個不同的開發團隊，開發不同版本的APP > >；除了開發成本，這樣還有個問題就是有的版本升級快，有的版本升級慢（審核問題），并且用戶可能不想更新，這樣新內容就無法推廣 > --- ### h5：web-app >h5程序運行示例圖  >由H5開發web-app的特點： >1. 其實就是個HTML頁面，需要基于瀏覽器運行(PC或則移動端瀏覽器再或則V8內核的工具也可以)，如果想要操作手機內部的軟件或則硬件，需要瀏覽器支持 >2. 相比于native-app來說，性能不好 >3. 所有的請求訪問都必須基于連網的狀態(除了有些是natvie-app把h5特殊處理了) 優勢： >H5只需要把服務器上的文件更新，用戶每次訪問看到的都是最新版本 劣勢： >H5頁面部署到了自己的服務器上，源文件都在服務器上，用戶想要看頁面，必須從服務器上重新的拉取代碼才可以 >雖然h5中支持manifest離線緩存，但現在并不成熟不大好用(什么時候更新什么時候不更新、穩定性、服務器支持、存儲大小) >而native-app不需要聯網，是因為所有代碼文件都在手機上，一些需要聯網訪問的，native-app都可以做離線緩存(緩存視頻撒的) --- ### Hybrid So，介于上面兩種開發方式優缺點， 目前我們開發一款APP通常為 **Natvie+H5的介入** 的方式： 在native-app中嵌入H5頁面(web-app)，我們把這種模式稱之為Hybrid，即混合APP開發 >Hybrid程序運行示例圖  微信這個 **native-app** 的 **js-bridge** 就長這樣  ### 典型應用 >微信是最為經典的Hybrid混合開發模式，它支持我們的H5頁面在微信這個 **native-app** 中運行，而且還可以調取微信提供的一些方法實現相關的操作(例如：微信的二次分享) > >微信現在的H5不是泡在web-view中而是qq瀏覽器中 > #### 常見項目類型 >1. PC端和移動端公用一套項目(同一個地址)，我們也要保持良好的展示性，例如：獵豹瀏覽器、華為官網等簡單的展示網站 > >2. PC端和移動端用的是不同的項目，例如：京東、淘寶等...【比第一種更常見】 >PC端固定布局即可 >移動端需要考慮響應式開發 >1)放在瀏覽器中運行 >2)放在第三方平臺中運行(微信) >3)放在自己公司的 **native-app** 中運行 >需要對運行環境進行判斷，因為在不同地方運行api接口的樣子可能不一樣 > ## 開發 ### 手機常用尺寸 >[蘋果] >iphone 5s 及以前：320px >iphone4：320\*480 >iphone5：320\*568 > >iphone6：375px >iphone6plus：414px > > >[安卓] >320、360、480、540、640 ... > 在做H5頁面開發之前，需要先從設計師手里索要UI設計圖(PSD格式的或則sketch設計稿) 如果是pc和移動端公用： 1360 1200 1100 1000 都有 如果是pc和移動端分開： 常用尺寸有 iphone4 -> 640\*960 iphone5 -> 640\*1136 iphone6 -> 750\*1334 ### 設備像素密度比DPI **主要是對圖片影響比較大** 之所以有影響，是因為高清屏，原本1x1的 非得按照2x2來呈現，這樣就可能會導致出現失真  為什么設計師給我們的設計稿為什么比真實尺寸要放大二倍？ 因為圖片在高倍屏下，會被放大，比如二倍屏幕中，本來是100x100的圖片會被放大為200x200，這就可能會失真 So，我們一般就直接給一個200x200的圖片(在普通屏，1倍屏中當做100x100用（寫css時）) ### viewport 移動端和pc端不一樣 pc端， 當前瀏覽器有多寬，html頁面就有多寬 而手機瀏覽器是無法調整大小的，html頁面寬度不是根據它也不是根據手機設備的寬度，而是一個固定的寬度**980**，這樣當我們在一個320的手機上觀看HTML頁面，為了保證把頁面呈現全，就需要讓HTML頁面大概縮小三倍，這樣雖然看全了，但所有內容都變小了，用戶想要看清楚，還需要手動把想看的部分放大  所以為了讓 html 頁面 在手機端中和手機視口寬度一樣，需要： ``` //和手機視口一樣大，不能縮放也不能放大 <meta name="viewport" content="width=device-width,user-scable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"></meta> ```  加了以后  ### REM 和**px**像素一樣，它是一個CSS樣式單位 它是相對于頁面根元素[HTML]字體大小設定的單位  然后在 body 中將字體大小重置為默認大小 ``` body{font-size:.16rem} ``` #### 在項目中如何利用REM進行響應式開發 >1. 嚴格按照設計稿中的提供的尺寸進行樣式編寫(不管是寬高，還是MARGIN，還是字體等)，例如：設計稿是750\*1336的，設計稿中有一個300\*150的圖片，我們布局的時候依然按照300\*150布局 > >2. 我們在編寫樣式的時候，不要使用**px**單位，所有的單位都統一換算為**REM**(此時我們需要讓HTML的FONT-SIZE=100px) > >3. 上述完成后，在750的手機上是沒有任何問題的，但是在375的手機上肯定存在問題了(頁面太大了)，此時我們需要讓頁面中的所有樣式，都整體縮小，才能達到響應式適配的目的 >此時只需要把HTML的字體大小修改，那么之前所有以REM為單位的樣式會自動跟著重新計算 >750設計稿：1REM=100px >375的手機：375/750*\100 就是最新HTML的字體大小，也是最新REM和PX的換算比例 >當前設備的寬度/設計稿寬度\*100 = 當前手機下REM和PX的換算比例，也就是HTML的字體大小