前面有分享了4种适配方案，但始终是通过手动缩放或者视口缩放来实现，用来做一些专题页，或者功能相对简单的项目来说也是完全能应付的，但整体来说感觉还是一种缩放，说不上是真正的适配，言外之意就是即将分享真正的适配喽，呵呵，开个玩笑，其实适配方式千差万种，怎么用全靠自己把握，遇到问题总有解决方法，兵来将挡水来土掩，实在解决不了的就想办法绕过，哈哈。

前面说了那么多废话，开始干正事，适配方案4主要是通过CSS3新增的一个长度单位REM来实现的，约定如下，页面中的1rem就是当前html的字体大小，假如当HTML的字体大小设为100px,那些时页面上的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();

    //当屏幕旋转的时候，再次执行一次适配,这里延时100ms是为了解决当用户快速转换屏幕的时候，适配失败的问题

    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,一起学习，一起进步

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

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

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

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

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

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

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

  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. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  2. 【转】gtk+多线程的程序实例

    #include <gtk/gtk.h> gint test() { while(1) { gdk_threads_enter(); g_printf("hello\n" ...

  3. C# JS 单例

    单例模式的三个特点: 1,该类只有一个实例 2,该类自行创建该实例(在该类内部创建自身的实例对象) 3,向整个系统公开这个实例接口 模式1: class Singleton { //私有,静态的类自身 ...

  4. （转）Linux的启动过程

    原文链接:http://www.ruanyifeng.com/blog/2013/08/linux_boot_process.html 半年前,我写了<计算机是如何启动的?>,探讨BIOS ...

  5. Access 2003下载地址和密钥

    电驴下载链接:ed2k://|file|sc_access_2003.iso|645523456|63AA6C30D609FDC22D056C4B424283F9|/ 安装SN: HH74C-P8F7 ...

  6. <Oracle Database>物理结构

    物理结构 Oracle物理结构包含了数据文件.日志文件和控制文件 数据文件 每一个Oracle数据库有一个或多个物理的数据文件.一个数据库的数据文件包含全部数据库数据.数据文件有下列特征: 一个数据文 ...

  7. mentohust 你让我如何说你是好呢？

    最近换了ubuntu系统结果热了不少的麻烦,  借此机会唠叨一下, 首先是你这个ubuntu16.4 你这个bug 太让人郁闷了吧,或许主要是应该怪我菜,装个看家的软件eclipse.还热除了一堆的麻 ...

  8. JSON 基础解释.

    JSON.(JavaScript Object Notation) JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本 ...

  9. HDOJ 4749 Parade Show

    说实在的在比赛时看错了题意,一直对最后一段的描述不是很清楚.闲话少说: 题意:给一个主串,再一个副串,问主串中有多少个子串和副串的的规律相同,即相邻的相等大于小于,用过的就不能再用了. #includ ...

  10. day10---异步I/O，gevent协程

    协程 协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在切回来 ...