方法一:Rem配合flex布局實(shí)現(xiàn)的移動(dòng)端適配;

?

要點(diǎn)1:采用meta標(biāo)簽;規(guī)定界面與設(shè)備相匹配;

<meta?name="viewport"?content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

要點(diǎn)2:通過js動(dòng)態(tài)控制字體大小和盒模型寬高(手機(jī)設(shè)備最安全的設(shè)備寬度640px;這里作為基準(zhǔn)點(diǎn));當(dāng)屏幕小于640px;自己做的產(chǎn)品將進(jìn)行等比例縮小

?<script>

(function?(doc, win) {

?var?docEl?=?doc.documentElement,

?resizeEvt?=?'orientationchange'?in?window???'orientationchange'?:?'resize',

?recalc?=?function?() {

?var?clientWidth?=?docEl.clientWidth;

?if?(!clientWidth)?return;

?if(clientWidth>=640){

?docEl.style.fontSize?=?'100px';

}else{

?docEl.style.fontSize?=?100?*?(clientWidth?/?640)?+?'px';

?}

?};

?

if?(!doc.addEventListener)?return;

?win.addEventListener(resizeEvt, recalc,?false);

?doc.addEventListener('DOMContentLoaded', recalc,?false);

?})(document, window);

?</script>

要點(diǎn)3:flex布局(參考阮一峰老師的篩子模型)

轉(zhuǎn)載于:https://www.cnblogs.com/QxkWeb/p/7346769.html

總結(jié)

以上是生活随笔為你收集整理的移动端手机适配的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。