移動端主流適配方案
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">
附: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);
移動端主流適配方案