方法一:Rem配合flex布局實現的移動端適配;

?

要點1:采用meta標簽;規定界面與設備相匹配;

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

要點2:通過js動態控制字體大小和盒模型寬高(手機設備最安全的設備寬度640px;這里作為基準點);當屏幕小于640px;自己做的產品將進行等比例縮小

?<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>

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

轉載于:https://www.cnblogs.com/QxkWeb/p/7346769.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。