移動端主流適配方案

1、流式布局（百分比布局） 案例：京東移動端

優點：簡單方便，只需要固定高度，寬度自適應；

缺點：大屏幕手機實際顯示的不協調。

2、響應式布局

優點：可以節約成本，不用再做專門的web app網站（外包公司、小公司、博客)；

缺點：工作量大、維護很難；國內大型企業在移動端很少用。

3、固定寬度 案例：荔枝FM 640

優點：與設備做等比例的縮放；

缺點：在大屏幕手機下兩邊留白，操作按鈕小。

4、目前主流做法rem 案例：淘寶移動端

rem：font size of root element 相對於根目錄字體的大小；

優點：能等比例的適配所有的屏幕，rem是根據html的font-size大小來變化的，基於這個出發，我們可以在任何一個設備下根據設備的寬度來設置html字型大小，從而實現自適應布局。

兩種方案：

（1）rem隨設備寬度做自適應，scale值固定為1；

（2）rem隨設備寬度做自適應，viewport進行縮放，scale值不固定。

5、未來趨勢

vw/vh 相對於viewport理想的視窗（設備）的比例；（目前兼容性較差）

1vw=10%設備寬度。

註：移動端基於標籤meta

<meta name="viewport" content="width=device-width,initial-scale=1.0">

文章來自博客園

找工作難？那是你沒選對行業!

2017年【中公教育】特別推出2017年就業促進計劃，500萬就業基金助你成為IT達人

詳情請戳：//www.ujiuye.com/zt/jycj/?wt.bd=zy35844tt

什麼？海量IT學習資料白給你都不要？別想了，加群搶：499754614

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！