标签：
此方案跟方案4是同一原理，也是通过REM实现的，能单独归类出一个方案，是因为它有一定的实用价值，当你遇到追求完美，追求到一像素的UI或者产品时，那此方案将解决你的困境。
方案5主要是用来解决一像素边框来设计的，当你的设计稿中到处是一像素边框，而UI跟产品拿着手机频频跟你说为什么在手机上边框这么粗的时候，而又无法劝服他们妥协的时候，就用这种适配方案吧，亲。
适配方案5代码如下：
<!DOCTYPE html> <html> <head> <title>主结构&适配方案5</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 getOnePx(){ var dpi=window.devicePixelRatio,//获取屏幕像素比 scalez=1/dpi; document.write(‘<meta content="width=device-width,initial-scale=‘+scalez+‘,maximum-scale=‘+scalez+‘,user-scalable=no" name="viewport">‘)//通过meta来实现缩放像素比的倍数 } //适配函数，动态修改html节点字号 function reset(){ var htmlo=document.getElementsByTagName(‘html‘)[0], clientW=document.documentElement.clientWidth || document.body.clientWidth, fontSz=clientW/16+‘px‘; htmlo.style.fontSize=fontSz; } //调用一像素显示 getOnePx(); //初始进来执行一次适配 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; oveflow:hidden; background:blue; color:white; line-height:4rem; font-size:0.75rem; text-align:center; } .aside_left{ background:red; } .aside_right{ background:green; } h3{ font-size:0.7rem; line-height:1.2rem; } ul{ 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：主要是通过动态根据屏幕的宽度设置html无素的字体，再根据1rem等于HTML的字号大小来换算布局，例如你的设计稿是640，那除以16则HTML的根字号就是40px,那假设设计上的尺寸是320PX的元素，在写样式的时候就写在320/40即8rem。
2：注意事项:此种方案也是开发HTML5项目很理想的适配方案，特别是公司的wap端项目或者wepAPP,适配5优于适配4的地方就是通过缩放“1/像素比”来实现1PX像素的展现。
适配4之所以不能实现一像素，是因为在手上机，为了让屏幕足够清晰，一般会用多个像素才显示一像素的东东，如苹果4，5都是像素比为2的，那一像素在它上面就会显示成2像素显得格外粗，既然跟像素比有关，那是不是通过先缩放像素分之1就能保证1PX还是以1PX来显示了。
二种方案可看情况选择使用，如果要求展现1PX像素的地方很多，而且又很在意这1像素选择这方案吧。
以上代码归属于我的github常用H5代码整理项目（详见其中adaptationMode/mode5/index.html）：https://github.com/xw5/mobile-code/
欢迎clone,欢迎star,一起学习，一起进少
标签：
原文地址：http://www.cnblogs.com/xwwin/p/5786043.html
