此方案跟方案4是同一原理，也是通过REM实现的，能单独归类出一个方案，是因为它有一定的实用价值，当你遇到追求完美，追求到一像素的UI或者产品时，那此方案将解决你的困境。

方案5主要是用来解决一像素边框来设计的，当你的设计稿中到处是一像素边框，而UI跟产品拿着手机频频跟你说为什么在手机上边框这么粗的时候，而又无法劝服他们妥协的时候，就用这种适配方案吧，亲。

适配方案5代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>主结构&适配方案5</title>
  5. <meta charset="utf-8">
  6. <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  7. <meta content="yes" name="apple-mobile-web-app-capable">
  8. <meta content="black" name="apple-mobile-web-app-status-bar-style">
  9. <meta content="telephone=no" name="format-detection">
  10. <meta content="email=no" name="format-detection">
  11. <!--适配主逻辑 S-->
  12. <script type="text/javascript">
  13.     //实现真实一像素显示
  14.     function getOnePx(){
  15.         var dpi=window.devicePixelRatio,//获取屏幕像素比
  16.             scalez=1/dpi;
  17.         document.write('<meta content="width=device-width,initial-scale='+scalez+',maximum-scale='+scalez+',user-scalable=no" name="viewport">')//通过meta来实现缩放像素比的倍数
  18.     }
  19.     //适配函数，动态修改html节点字号
  20.     function reset(){
  21.         var htmlo=document.getElementsByTagName('html')[0],
  22.             clientW=document.documentElement.clientWidth || document.body.clientWidth,
  23.             fontSz=clientW/16+'px';
  24.         htmlo.style.fontSize=fontSz;
  25.     }
  26.     //调用一像素显示
  27.     getOnePx();
  28.     //初始进来执行一次适配
  29.     reset();
  30.     //当屏幕旋转的时候，再次执行一次适配
  31.     window.addEventListener('resize',function(){
  32.         setTimeout(function(){reset();},100);
  33.     },false)
  34. </script>
  35. <!--适配主逻辑 E-->
  36. <style>
  37.     body{
  38.         margin:0;
  39.         background:#000;
  40.     }
  41.     h3,p,ul{
  42.         margin:0;
  43.         padding:0;
  44.     }
  45.     .wrap{
  46.          width:100%;
  47.         -webkit-box-sizing: border-box;
  48.         box-sizing: border-box;
  49.         padding:0 0.5rem;
  50.         background:#ccc;
  51.         overflow:hidden;
  52.         line-height:0.9rem;
  53.         font-size:0.55rem;
  54.     }
  55.     .aside_left,.aside_right{
  56.         width:7.5rem;
  57.         height:4rem;
  58.         float:left;
  59.         color:white;
  60.         line-height:4rem;
  61.         font-size:0.65rem;
  62.         text-align:center;
  63.     }
  64.     .aside_con{
  65.         width:15rem;
  66.         height:4rem;
  67.         oveflow:hidden;
  68.         background:blue;
  69.         color:white;
  70.         line-height:4rem;
  71.         font-size:0.75rem;
  72.         text-align:center;
  73.     }
  74.     .aside_left{
  75.         background:red;
  76.     }
  77.     .aside_right{
  78.         background:green;
  79.     }
  80.     h3{
  81.         font-size:0.7rem;
  82.         line-height:1.2rem;
  83.     }
  84.     ul{
  85.         padding-left:1rem;
  86.         border:1px solid #000;
  87.     }
  88. </style>
  89. </head>
  90. <body>
  91.     <div id="wrap" class="wrap">
  92.  
  93.         <!--示范结构 S-->
  94.         <div class="aside_con">
  95.             <div class="aside_left">示范块内容0</div>
  96.             <div class="aside_right">示范块内容1</div>
  97.         </div>
  98.         <div class="aside_con">整条示范内容2</div>
  99.         <!--示范结构 E-->   
  100.  
  101.     </div>
  102. </body>
  103. </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. C#实现按键精灵的'找图' '找色' '找字'的功能

    背景:游戏辅助功能通常使用按键精灵编写脚本,按键精灵的最大卖点就是能够找到画面中字,图,色,这对于模拟用户鼠标操作至关重要,这能找到道具,找到血量,实现自动打怪,自动补血,自动买卖道具,博主闲来无聊, ...

  2. Java 第29章GUI

    GUI入门 JDBC 连接数据库的过程 注册驱动(class ,forName) 创建连接 创建连接对象 执行SQL语句 statement对象的类型与作用 1.(layout :版面,布局) 2.( ...

  3. RestSharp简单扩展

    using RestSharp; using RestSharp.Deserializers; using RestSharp.Serializers; using System; using Sys ...

  4. 高等微积分及其应用 nicholas.pdf——下载地址

    http://pan.baidu.com/share/link?shareid=426414429&uk=3977204074 这本书在网络上很少有了,本人是在群里下过来整理成一个文档了,由n ...

  5. [UCSD白板题] Covering Segments by Points

    Problem Introduction You are given a set of segments on a line and your goal is to mark as few point ...

  6. WebView的基本使用方法

    WebView是View的子类,它主要用来显示网页的. 因为我们要用到网络,所以需要先添加权限:在 Anroidmanifest <manifest ... > <uses-perm ...

  7. nginx Windows服务形式运行

    背景 现在使用ngnix的人越来越多,nginx的优势劣势网上也很多说明.这里就不探讨nginx优势与劣势,每个工具都有自己优势劣势,没有最好的工具,只有最合适的工具.   如何选择适当的工具,根据项 ...

  8. 插入排序-java

    排序-插入排序 基本思想:将待排序表看作左右两部分,其中左边为有序区,右边为无序区, 整个排序过程就是将右边无序区中的元素逐个插入到左边的有序区中,以构成新的有序区. 平均时间:O(n2) 最好情况: ...

  9. xcode6如何支持空模板

    Single View Application 改成空模板的歩揍(xcode6.0.1): 1.删除info.plist 中的Main Storyboard file base name 选项 2.将 ...

  10. Paypal支付接口

    先吐槽一下,国外的创业环境真的远远好于国内的创业环境. vps便宜,网络质量好,没有各种政策监管,各种便捷的金融工具.这其中就包括paypal. Paypal 支持两种付款方式,信用卡+paypal注 ...