前面有分享了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. HDU Game Theory

    5795 || 3032 把x个石子的堆分成非空两(i, j)或三堆(i, j, k)的操作->(sg[i] ^ sg[j])或(sg[i] ^ sg[j] ^ sg[k])是x的后继 #def ...

  2. laravel中如何写验证码文件,并防止中文乱码.

    本例为生成中文验证码,专为laravel而生. //控制器: public function getVcode(Request $request){ $width=845; $height=125; ...

  3. 给mysql的root用户

    grant all privileges on *.* to 'root'@'%' identified by 'root' with grant option;

  4. 启动tomcat时遇到的问题

    1.当启动Tomcat时,出现了如下信息: The APR based Apache Tomcat Native library which allows optimal performance in ...

  5. 实现js的二叉树

    今天算是第一次写一篇自己的博客,越是学习就越感叹学无止境,为了记录下来用js实现二叉树的方法,这算是最简单的一个算法了. 二叉树实现原理:把数组的第一个数据当作根节点,每个节点都有根节点,左孩子和右孩 ...

  6. 【算法与数据结构】冒泡、插入、归并、堆排序、快速排序的Java实现代码

    详细过程就不表了,看代码吧 import java.util.Arrays; public class Sort { static int swapTimes=0; public static voi ...

  7. java构造器

    java的构造器不是方法,因为没有返回值. 构造器可以重载. 构造器的访问说明符: private:只有本类可以使用这个构造器. protected:这个类的子类和包中的类都可以使用此构造器. pub ...

  8. ios开发中经常用到的控件

    以下是按照使用频率对ios的控件进行罗列. 1.最常用的UI控件: UIButton (按钮).UILabel (文本标签).UITextField (文本输入框).UIImageView( 图片显示 ...

  9. eclipse执行上一次结果

    eclipse执行上一次结果,解决方法:Project-clean

  10. 移动端web开发 问题

    1.APP 返回按钮 <a href='#' onclick='javascript:history.back(-1);'></a> 返回有问题需要使用 href='javas ...