移動端適配JS和CSS

2021-08-17 10:52:32 字數 866 閱讀 1399

移動端適配一般是兩種方式

一js方式:

setrem();

window.addeventlistener("orientationchange", setrem);

window.addeventlistener("resize", setrem);

function setrem()

js方式書寫方便,而且適配所有的機型,但是好像會有小數點問題

二css方式:

/* 適配 */

@media only screen and (min-width: 320px)

}@media only screen and (min-width: 360px)

}@media only screen and (min-width: 375px)

}@media only screen and (min-width: 400px)

}@media only screen and (min-width: 412px)

}@media only screen and (min-width: 414px)

}@media only screen and (min-width: 480px)

}@media only screen and (min-width: 768px)

}

css方式適配比較麻煩,每乙個機型都要去手動設定,但是比較準確,小數點問題好像會被解決掉

移動端js適配檔案

function doc,win abort if browser does not support addeventlistener if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.add...

移動端適配

js適配方案 function resizefun else body removeclass hightscreen shortscreen portrait var ratio window width window height if screenstate portrait else if ...

移動端適配

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