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

H5常用代码：适配方案5的更多相关文章

  1. 手淘H5移动端适配方案flexible源码分析

    移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...

  2. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  3. H5常用代码：适配方案4

    前面有分享了4种适配方案,但始终是通过手动缩放或者视口缩放来实现,用来做一些专题页,或者功能相对简单的项目来说也是完全能应付的,但整体来说感觉还是一种缩放,说不上是真正的适配,言外之意就是即将分享真正 ...

  4. H5常用代码：适配方案3

    在H5项目中有一种常见的宣传页,就是那种整屏整屏的,带着炫丽进场动画的移动宣传页,不仅是一种欣赏也起到了很大宣传作用. 对于这种整屏的适配,前面通过视口的兼容处理也是可以做到的,但是在窄屏下会在上下有 ...

  5. H5常用代码：适配方案2

    前面的通过视口做适配的方案由于安卓低版本原生浏览器的存在,在许多场合不尽如人意,会在低版本安卓上出现,不缩放,手动缩放未禁止的问题. 于是出现了第二种适配方案,既然通过视口缩放可以兼容,那为什么不直接 ...

  6. H5常用代码：适配方案1

    在工作中接到H5项目,第一件想到的事就应该是屏幕适配问题,解决了屏幕适配,接下来的事才能真正开始.从此篇博客开始会连续记录下我经常用到的一些适配方案. 对于传统的PC项目,直接在移动端打开也都是会以视 ...

  7. 最佳移动端h5自适应rem适配方案

    一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib ...

  8. h5 移动端适配方案思考

    基础概念 CSS像素(CSS pixels) 这个是浏览器使用的抽象单位,用来精确度量网页上的内容.平时经常写的width:100px;height:100px;都是与设备无关的. 设备独立像素(de ...

  9. H5常用代码：页面框架

    万变不离其宗,道法自然! 虽然H5的小项目一波又一波,但有一个东东基本没什么变化,那就是整个页面的框架结构. 我所常用的H5常用页面框架如下: <!DOCTYPE html> <ht ...

随机推荐

  1. 1306. Sorting Algorithm 2016 12 30

    1306. Sorting Algorithm Constraints Time Limit: 1 secs, Memory Limit: 32 MB Description One of the f ...

  2. checkbox、全选反选，获取值

    <input id="Chk_All" onclick="CheckAll()" type="checkbox" /> < ...

  3. Android Studio Gradle 问题 解决方案

    将AS2.0升到2.1.3出现的问题: Error:No service of type Factory  available in ProjectScopeServices. 在项目中找到build ...

  4. Linq学习工具及Lamada表达式

    好东西.转载一个.以备学习 Linq学习工具:     http://www.linqpad.net/ Lamada表达式: Func<int, int, int> IntPow = (x ...

  5. TestNG参数化测试【转】

    原文:http://www.yiibai.com/testng/20130916303.html 在TestNG的另一个有趣的功能是参数测试.在大多数情况下,你会遇到这样一个场景,业务逻辑需要一个巨大 ...

  6. 以 Composer 的方式在 PhpStorm 中添加代码审查工具 Code Sniffer

    一.前提条件 Windows 操作系统 可以在本地运行的 PHP 环境,个人用的是 laragon PhpStorm Composer 二.设置步骤 (一)下载 Code Sniffer 主要使用 P ...

  7. Android ExpandableListView

    ExpandableListView 结合SimpleExpandableListAdapter用法 最终实现效果: activity_main.xml <?xml version=" ...

  8. Java使用velocity导出word

    效果展示: 使用word编辑好模板

  9. Ceph性能测试工具和方法。

    0. 测试环境 同 Ceph 的基本操作和常见故障排除方法 一文中的测试环境. 1. 测试准备 1.1 磁盘读写性能 1.1.1 单个 OSD 磁盘写性能,大概 165MB/s. root@ceph1 ...

  10. Magicodes.Shop——版本历史

    Magicodes.Shop为湖南心莱信息科技有限公司(xin-lai.com)Magicodes系列产品之一. 产品中引用的Magicodes系列Nuget包的开源库地址为:https://gith ...