此方案跟方案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. Mysql数据库表关于几个int类型的字符长度

    Data type Range Storage bigint -2^63 (-9,223,372,036,854,775,808) to 2^63-1 (9,223,372,036,854,775,8 ...

  2. Web大文件上传控件-jsp-sql示例更新-Xproer.HttpUploader6.2

    版权所有 2009-2016荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  3. android目录介绍

  4. shell 记录

    查看进程打开的文件句柄lsof -p 进程号|wc -l date --set "Wed Dec 11 14:51:41 CST 2013" 重启VPN pon vpn arg=` ...

  5. 远程连接oracle服务器

    用户名 / 密码@172.16.16.203:1521/orcl

  6. C语言字符串函数例子程序大全 – string相关

    关于字符串函数的应用细则,例子程序 – jerny 函数名: stpcpy 功 能: 拷贝一个字符串到另一个 用 法: char *stpcpy(char *destin, char *source) ...

  7. fatal error C1010: 在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include "StdAfx.h"”? 解决方法

    错误描述: fatal error C1010: 在查找预编译头时遇到意外的文件结尾.是否忘记了向源中添加“#include "StdAfx.h"”? 错误分析:     此错误发 ...

  8. Shiro权限验证代码记录，正确找到shiro框架在什么地方做了权限识别

    权限验证方式的验证代码: org.apache.shiro.web.servlet.AdviceFilter这个类是所有shiro框架提供的默认权限验证实例类的父类 验证代码: public void ...

  9. 图片下载缓存防止OOM

    一  ImageManager ImageMemoryCache(内存缓存).ImageFileCache(文件缓存)    关于Java中对象的软引用(SoftReference),如果一个对象具有 ...

  10. 分享：根据webservice WSDL地址自动生成java调用代码及JAR包

    分享:根据webservice WSDL地址自动生成java调用代码及JAR包使用步骤:一.安装java 并配置JAVA_HOME 及 path二.安装ANT 并配置ANT_HOME三.解压WsdlT ...