前面有分享了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,一起学习，一起进少