首先将body和html的宽设置最大为750px并且居中。body,html{width:100%;height:100%;max-width:750px;margin:0auto;background-color:#fff;}然后给页面加上声明移动端设置的meta头<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">然后加上字体调整js,加上之后,可以通过rem同时兼顾手机和电脑的字体大小。(function(doc,win){vardocEl=doc.documentElement,resizeEvt='orientationchange'inwindow?'orientationchange':'resize',recalc=function(){varclientWidth=docEl.clientWidth;if(!clientWidth)return;if(clientWidth>=750){docEl.style.fontSize='200px';}else{docEl.style.fontSize=(100*(clientWidth/750))*2+'px';}};if(!doc.addEventListener)return;win.addEventListener(resizeEvt,recalc,false);doc.addEventListener('DOMContentLoaded',recalc,false);})(document,window);加上这个之后div的宽高,字体的大小等。都可以使用rem单位来进行设置。根据这段js1rem=100px0.01rem=1px。写的时候注意换算下就可以了。
学习记录