标签：
前面有分享了4种适配方案，但始终是通过手动缩放或者视口缩放来实现，用来做一些专题页，或者功能相对简单的项目来说也是完全能应付的，但整体来说感觉还是一种缩放，说不上是真正的适配，言外之意就是即将分享真正的适配喽，呵呵，开个玩笑，其实适配方式千差万种，怎么用全靠自己把握，遇到问题总有解决方法，兵来将挡水来土掩，实在解决不了的就想办法绕过，哈哈。
前面说了那么多废话，开始干正事，适配方案4主要是通过CSS3新增的一个长度单位REM来实现的，约定如下，页面中的1rem就是当前html的字体大小，假如当HTML的字体大小设为100rem,那些时页面上的1REM=100PX，假设页面上的640PX的元素用REM表示就是6.4rem.
适配代码如下：
<!DOCTYPE html> <html> <head> <title>主结构&适配方案4</title> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <!--适配主逻辑 S--> <script type="text/javascript"> //适配函数 function reset(){ var htmlo=document.getElementsByTagName(‘html‘)[0], clientW=document.documentElement.clientWidth || document.body.clientWidth, fontSz=clientW/16+‘px‘; htmlo.style.fontSize=fontSz; } //初始进来执行一次适配 reset(); //当屏幕旋转的时候，再次执行一次适配 window.addEventListener(‘resize‘,function(){ setTimeout(function(){reset();},100); },false) </script> <!--适配主逻辑 E--> <style> body{ margin:0; background:#000; } h3,p,ul{ margin:0; padding:0; } .wrap{ width:100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding:0 0.5rem; background:#ccc; overflow:hidden; line-height:0.9rem; font-size:0.55rem; } .aside_left,.aside_right{ width:7.5rem; height:4rem; float:left; color:white; line-height:4rem; font-size:0.65rem; text-align:center; } .aside_con{ width:15rem; height:4rem; overflow:hidden; background:blue; color:white; line-height:2rem; font-size:0.75rem; text-align:center; } .aside_left{ background:red; } .aside_right{ background:green; } h3{ font-size:0.7rem; line-height:1rem; } ul{ overflow:hidden; padding-left:1rem; border:1px solid #000; } </style> </head> <body> <div id="wrap" class="wrap"> <!--示范结构 S--> <div class="aside_con"> <div class="aside_left">示范块内容0</div> <div class="aside_right">示范块内容1</div> </div> <div class="aside_con">整条示范内容2</div> <!--示范结构 E--> </div> </body> </html>
适配说明：
1：前面有提到1REM等于HTML的字体大小，那现在最关键的就是怎么根据不同屏幕尺寸修改HTML的字体大小，主要是通过根据屏幕的可视区宽度设置html节点的字体大小。例如你的设计稿是640px，我们就想像在可视区是640PX的时候，那除以16则HTML节点的字号就是40px,那要表现设计上的尺寸是320PX的元素，在写样式的时候就写在320/40即8rem即可。
可能会问为什么这里要除以16，是因为为了计算出一个合适的HTML字体大小，你完全可以除以其它值，或者直接不除，直接拿可视区宽度作为上HTML字体大小也是可以的，但是在布局计算元素尺寸的时候又是另一场恶梦。
2：此种方案是开发HTML5项目很理想的适配方案，特别是公司的wap端项目或者wepAPP,此种适配有一个问题就是很难实现1PX的像的东东，如果手机的像素比是2，那1PX的边框会显示成2像素，只会影响这些小细节，不会影响功能使用，要想做出近1PX的东东，可以通过伪类:after :before来插入元素再缩小1部就可以模拟出近似1PX的东东，如果想完美实现1PX，适配方案5会是你需要的。
以上代码归属于我的github常用H5代码整理项目（详见其中adaptationMode/mode4/index.html）：https://github.com/xw5/mobile-code/
欢迎clone,欢迎star,一起学习，一起进少
标签：
原文地址：http://www.cnblogs.com/xwwin/p/5782522.html
