移動端適配

js適配方案：

function resizefun() 

} else 
}$('body').removeclass('hightscreen shortscreen portrait')
var ratio = $(window).width() / $(window).height()
if (screenstate == 'portrait')  else if (ratio < .56) 
}else
if(ratio >2.85)
}}resizefun()
window.addeventlistener('resize', resizefun, false)

/*第一步：判斷是否為ios，需區別開來*/

/*第二步：採用螢幕比例進行適配*/
@media screen and (min-aspect-ratio: 7/11)
@media screen and (max-aspect-ratio: 375/710)
@media screen and (min-aspect-ratio: 12/7)*/
/*body*/
}

@media screen and (orientation: portrait)

@media screen and (orientation: landscape)

移動端適配

不論裝置寬度是多少，統一把布局視口設定成設計稿的寬度。假設設計稿寬度是375px。不管螢幕多大，都看作375px。width只能改變布局視口，不能改變視覺視口。定義設計稿的寬度 計算當前裝置的寬度document.documentelement.offsetwidth scale 裝置寬度 設計搞寬...

移動端適配

無法對1px邊框的問題進行處理 裝置畫素比的問題 採用rem,px單位進行適配 使用js動態的計算當前的rem單位取值。即 1 rem px 假如設計稿的寬度為 750px 元素測量得到的寬度為 100px 那麼在視口寬度為 375px下 元素的寬度就變為 50 px 元素寬度從 px 單位轉為 r...

移動端適配

首先在head標籤裡加上meta而後再將寫好的指令碼引入即可 將下面 寫在乙個檔案中，在head中引用 function e,t function d var i t.documentelement,o e.devicepixelratio 1 if n d e.addeventlistener r...