移动端自适应布局方案尝试

《移动端自适应布局方案尝试》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、移动端自适应布局方案尝试原文地址：移动端自适应布局方案尝试问题刚开始接触移动端H5贝血的时候最困扰的几个问题是：6或6p上明明是1px的边框怎么就成了2px或3px辣么粗！图片，div等如何等比白适应设计图后來慢慢知道了第一点是由于retina屏幕下设备像素比的问题造成，第二点知道了单位rem。H的不想因为使用rem而一一去计算设计稿的尺寸，设计稿750的尺寸的标注可以宜接在sass中使用；字体不使用rem缩放，原因是：显然，我们在iPhone3G和iPhone4的Retina屏下面,希望看到的文本字号是相同的。也就是说，我们不希望

2、文本在Retina屏幕卞变小，另外，我们希與在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都口带一些点阵尺寸，通常是16px和24px,所以我们不希望出现13px和15px这样的奇尺寸。还一个冃的是，在页而没有设置viewport的吋候动态设置，并且不让页而有一个“闪现”的过程（也就是刚加载没设置的状态到设置的状态）；页面动态变化时，尺寸相应变化；尝试在写H5页面的时候，尽可能少的去写meta标签，我会这样做：

3、krel="stylesheet"href="style/style.css">就这样简单，然后实现的代码当然是放在head里。因为并没有写viewport,所以得判断加上复制代码if(ImetaEI){metaEI=doc.createElement('meta');metaEl.setAttributeCname','viewport');metaEI.setAttributefcontent：,width=device-width,initial-scale=1.0,maximum-scale=1.0,minim

4、um-scale=1.0,user-scalable=no,);if(docEl.firstElementChild){docEl.firstElementChild.appendChild(metaEI);}else{varwrap=doc-createElementCdiv*);wrap.appendChild(metaEI);doc.write(wrap.innerHTML);}}复制代码然后根据页面的devicePixelRatio缩放varscale=parseFloat((1/dpr).toFixed(2));if(dp

5、r!=1){metaEl.setAttribute('content：,width=device-width,initial-scale=,+scale+',maximum-scale='+scale+',minimum-scale='4-scale+',user-scalable=no');}设置根字体人小复制代码//documentwidthfunctionsetDocumentFontSize(){varwidth=docEl.getBoundingClientRect().width;docEl.style.fontSize

6、=width/10+*px';}setDocumentFontSize();复制代码页面resize监听复制代码vartimer;win.addEventListener('resize',function(){clearTimeout(timer);timer=setTimeout(function(){setDocumentFontSize();},300);},false);复制代码为了字体不使用rem,需要为documentElement设置data-dpr性复制代码//documentdata-dprsetfont-siz

7、epxvardpr=window.devicePixelRatio;if(devicePixelRatio>=3&&(!dpr

8、

9、dpr>=3)){dpr=3;}elseif(devicePixelRatio>=2&&(!dpr

10、

11、dpr>=2)){dpr=2;}else{dpr=1;}docEl.setAttribute(,data-dprdpr);复制代码sass相关设置完全根据设计稿尺寸写复制代码//baseFontSizeSbaseFontSize:75;@functionpx2rem($px){@return$px/$b

12、aseFontSize*1rem;}@functionpx2rem2($px){@returnpx2rem($px*2);}复制代码字体大小变化复制代码//字体人小计算@mixinfont-dpr($font-size){font-s