H5常用代码：适配方案5

此方案跟方案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,一起学习，一起进步！