html5移動端主流適配方案

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

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

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

二、響應式佈局

優勢：能夠節約成本，不用再作專門的web app網站（外包公司、小公司、博客)；

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

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

優勢：與設備作等比例的縮放；

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

四、目前主流作法rem    案例：淘寶移動端

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

優勢：能等比例的適配全部的屏幕，rem是根據html的font-size大小來變化的，基於這個出發，咱們能夠在任何一個設備下根據設備的寬度來設置html字號，從而實現自適應佈局。

兩種方案：

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

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

五、將來趨勢

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

1vw=1%*設備寬度。

 

注：移動端基於標籤meta

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

附：javascript獲取設備寬度並設置根目錄下字體大小的一種方法

！function(win){

　　var oHtml=win.document.documentElement; //獲取html

　　var timer=null;

 　　function changeRem(){

       　　var width=oHtml.getBoundingClientRect().width; //獲取設備的寬度，IE瀏覽器要作兼容處理

　　　　if(width>540){

　　　　　　width=540;

　　　　}

　　　　var rem=width/10;

　　　　oHtml.style.fontSize=rem+"px"; //設置根目錄下字體大小

　　}

　　win.addEventListener("rasize",function(){

　　　　clearTimeout(timer);

　　　　timer=setTimeout(changeRem,300);

　　})

　　changeRem();

 }(window);