<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>rem phone test</title>
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        html {
            height: 100%;
            width: 100%;
            font-family: 'Heiti SC', 'Microsoft YaHei';
            font-size: 20px;
            overflow: hidden;
            outline: 0;
            -webkit-text-size-adjust:none;
        }
        body {
            height: 100%;
            margin: 0 auto;
            overflow: auto;
            -webkit-user-select: none;
            position: relative;
        }
        header,footer {
            width: 100%;
            line-height: 1.5rem;
            font-size: 1rem;
            color: #000;
            border: 1px solid #ccc;
            text-align: center;
            font-weight:bold;">#ccc;
        }
        .bd {
            margin-top: 1rem;
            margin-bottom: .5rem;
            margin-right: -.5rem;
            font-size: 0;
        }
        .box {
            width: 5rem;
            height: 5rem;
            display: inline-block;
            margin-right:0.5rem;
            margin-bottom:0.5rem;
        }
        .blue-box {
            font-weight:bold;
　　　　　　　background-color:red;
        }
        .org-box {
            font-weight:bold;
　　　　background-color:blue;
        }
    </style>
</head>
<body>
<header>我是头部</header>
<div class="bd">
    <div class="box blue-box"></div>
    <div class="box red-box"></div>
    <div class="box blue-box"></div>
    <div class="box red-box"></div>
    <div class="box blue-box"></div>
    <div class="box red-box"></div>
</div>
<footer>我是页脚</footer>
<script>
    (function (doc, win) {
        //获取根节点，将它赋值给一个变量
        var docEl = doc.documentElement,
                //利用三目运算来判断window中是否有这个事件，将它赋值给变量
                //orientationchange()是改变窗口的方向
                //resize()是计算窗口改变了多少次
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    //获取可视区域的宽度
                    var clientWidth = docEl.clientWidth;
                    //进行判断是否要执行下面的换算
                    if (!clientWidth){
                    //0 undefined "" 都会返回false
                        return;
                    }
                    //进行单位的换算，通过窗口的变化，来进行根节点的单位变化
                    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                };
        if (!doc.addEventListener){
            return;
        }
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);  //匿名函数的传参
</script>
</body>

</html>

APP自适应的例子的更多相关文章

  1. web app 自适应方案总结 关键字 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

  2. web app 自适应方案总结 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

  3. web app 自适应 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

  4. 移动端Web App自适应布局探索

    1.困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 11 ...

  5. Android学习系列(4)--App自适应draw9patch不失真背景

    做人要大度,海纳百川,做事要圆滑,左右逢源,这让我想到了编程也是如此,代码要扩展,界面也要考虑自适应.这篇文章是Android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 1. ...

  6. 手机版WEB开发经验分享,手机版网站开发注意事项,网站自适应,手机版网站自适应,移动安卓APP自适应

    转自 http://my.oschina.net/cart/blog/282477 做前端开发不短了,用过jQuery Mobile jqMobi 也纯手工写过.. 最后总结如下: jQuery Mo ...

  7. vue 单页面应用 app自适应方案

    本文是使用淘宝的方案进行布局开发的,遇到的问题是会对app内使用的第三方插件,当页面进行缩放后,比如高德地图中的文字会显得过小,我使用的方法就是手动的动每一个尺寸进行手动的px 到 rem的替换,而不 ...

  8. flex自适应小例子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 移动端web app自适应布局探索与总结

    要掌握的知识点: iphone6 屏幕尺寸为 375*667 (pt)也就是 网页 全屏显示时候 document.documentElement.clientWidth------可以理解为屏幕越大 ...

随机推荐

  1. android基础（二）Broadcast Receiver知识

    1.广播的注册 (1)动态广播注册: 优点:可以灵活控制广播的注册与撤销 缺点:必须在程序启动时才能接收广播 IntentFilter :当Intent在组建之间传递时,组件想告诉android系统自 ...

  2. 关于relative和absolute的总结

    对于定位这个性质我原理上来说自己是明白的,但是在实践的过程中,总会出现各种稀奇古怪的情况,加relative或是absolute就可以解决,但是遇到这些情况总是不明白为什么!!!难道是脑容量太小的原因 ...

  3. ssd硬盘u盘装win7扩展文件时0x80070570错误

    搞了个minisata ssd 硬盘,80G正好,只用来装操作系统. 这个u盘装了很多系统了,没感觉会有什么问题,但在安装过程中出现0x80070570错误.见图 网上有很多方法. 最后的解决方法是: ...

  4. 不同vlan之间的相互访问

    拓扑图: 用到的命令: 给端口的vlan <sw1>用户模式 切换到系统模式 system-view 交换机名称 sysname swj1 创建vlan 3 端口模式选择int g0/0/ ...

  5. pull方法解析xml

    private void getData() {        new Thread() { public void run() {                try {              ...

  6. 主题：Android、iPhone和Java三个平台一致的加密工具

    先前一直在做安卓,最近要开发iPhone客户端,这其中遇到的最让人纠结的要属Java.Android和iPhone三个平台加解密不一致的问题.因为手机端后台通常是用JAVA开发的Web Service ...

  7. Logistic回归原理及公式推导[转]

    原文见 http://blog.csdn.net/acdreamers/article/details/27365941 Logistic回归为概率型非线性回归模型,是研究二分类观察结果与一些影响因素 ...

  8. Unity3d 引擎原理详细介绍

    体系结构 为了更好地理解游戏的软件架构和对象模型,它获得更好的外观仅有一名Unity3D的游戏引擎和编辑器是非常有用的,它的主要原则. Unity3D 引擎 Unity3D的是一个屡获殊荣的工具,用于 ...

  9. 利用Code128字体将文本转换为code128条形码

    利用Code128字体将文本转换为code128条形码[转]   最近在做仓储的项目,许多的打印文件都包含条形码,之前一直使用C39P24DhTt字体直接转换为39码,但是最近要求使用code128编 ...

  10. Unity Shader——Writing Surface Shaders(2)——Custom Lighting models in Surface Shaders

    Surface Shader中的自定义光照模型 当你在编写 Surface Shaders 时,是在描述一个表面的属性(反射颜色.法线……),而且光的交互过程是由一个光照模型来计算的.内建的光照模型有 ...