前面有分享了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. nginx日常运维

    pid丢失办法: 1.查找nginx进程ID ps -ef | grep nginx 2.将进程ID写入pid > /tmp/nginx.pid 3.重启nginx

  2. Xamarin studio配置问题

    最近对Xamarin很感兴趣,就下班抽空在家里的电脑上进行配置,于是乎出现了各种问题,对此进行总结. 1. Cannot find `aapt.exe`. Please install the And ...

  3. 虚拟机安装LINUX网络配置注意的问题

    1.如果你配置本地IP,不上网,网卡选项可以选择仅主机模式,如果要上网,就直接选择桥接模式,复制物理网络这个选项 2.将NET1网卡(仅主机模式)选中,然后进入下面这个配置选项   上面方框内的IP段 ...

  4. HTTP 302 404 500 状态消息

    1xx:信息 100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求. 101 Switching Protocols 服务器转换协议:服务器将 ...

  5. JS 跨源请求

    一个 URL 大概包含的部分:scheme://host:port/path?#hash 比如一个 URL 为 http://www.xxx.com:8888/school/student.html, ...

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

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

  7. well属性

    Bootstrap 有一个 class 属性叫做 well,它的作用是为设定的列创造出一种视觉上的深度感(一种视觉上的效果,动手写代码体会一下).

  8. 数据库表中存在Text类型的属性时，写sql语句时需要注意喽！

    之前,习惯性地写查询语句时,查询条件用“=”判断.今天写程序的时候,查询时突然报了一个错误:数据类型text 和varchar 在equal to 运算符中不兼容.查看了一下数据库发现,其中有一个属性 ...

  9. vim中输入tab符

    今天在写Makefile时各种出错.后来发现是all:的下一行,make前面必须是tab符,不能是空格. 但是vim中只要按tab就会自动转换成4个空格.平时编程需要,也不便把这个设置取消. 查了下, ...

  10. c#读取webconfig

    string Conn_str = ConfigurationManager.AppSettings["connectionString"].ToString();