大家好，时隔一年多了，前几篇探讨的rem布局后来又有改进不过一直没有想起来更新博客，rem布局淘宝用的也比较早，有兴趣的可以看看淘宝的flexible

,我的用法比较简单，原来一样，废话不说了直接上代码

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

        <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <meta name="format-detection" content="telephone=no"/>

        <title>GreatBoy</title>

        <style>

            /*-----css Reset end-----*/

            body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{

                margin:0;

                padding:0px;

            }

            html{

/*                display: none;*/

            }

            body{

                font-size: 14px;

            }

            .nav img{

                width: 100%;

            }

        </style>

    </head>

    <body>

        <div class="nav"><img src="http://p1.jmstatic.com/banner/75/mobile_app/24326_0.jpg"/></div>

        <div id="container">

            <div id="user">用户信息<span id="userinfo"></span></div>

        </div>

        <script>

        (function(win) {

            var doc = win.document,

                scale = 16,

                $body = doc.getElementsByTagName('body')[0],

                $html = doc.getElementsByTagName('html')[0],

                windowWidth = doc.documentElement && doc.documentElement.clientWidth || doc.body.clientWidth || win.innerWidth,

                windowHeight = document.documentElement && document.documentElement.clientHeight || documentElement.body.clientHeight || window.innerHeight,

                deviceAgent = navigator.userAgent.toLowerCase();

            if ( deviceAgent.match( /(iphone|ipod|ipad|android|windows\s*phone|symbianos)/ ) ) {

                try{

                   // if ( window.localStorage && window.localStorage.getItem('scale_greatboy') ) {

                    //    scale = window.localStorage.getItem('scale_greatboy');

                   // } else {

                        scale = parseFloat(windowWidth * 16 / (16*3.2));

                        if (windowHeight > windowWidth) {

                            //window.localStorage && window.localStorage.setItem('scale_greatboy', scale);

                        }

                   // }

                }catch(e){

                }

                if (deviceAgent.match(/android\s*2.3/) && deviceAgent.match(/micromessenger/)) {

                    scale = 16;

                }

                $html.style.fontSize = scale + 'px';

                $html.style.display = 'block';

            } else {

                window.onresize = function(){

                    windowWidth = doc.documentElement && doc.documentElement.clientWidth || doc.body.clientWidth || win.innerWidth;

                    scale = parseFloat(windowWidth * 16 / (16*3.2));

                    $html.style.fontSize = scale + 'px';

                };

                scale = parseFloat(windowWidth * 16 / (16*3.2));

                $html.style.fontSize = scale + 'px';

                $html.style.display = 'block';

            }

            $body.style.width = '3.2rem';

        })(window);

 </script>

    </body>

</html>

　　

h5布局之道（最终篇）的更多相关文章

  1. Flex 布局教程：实例篇（转）

    你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solve ...

  2. 安卓布局修改基础常识篇之TextView属性

    [天使]安卓布局修改基础常识篇之TextView属性 在修改布局xml文件时需要熟练掌握一些属性,以下是TextView也就是文本的属性:android:autoLink 是否自动链接网址或邮箱地址: ...

  3. CSS学习笔记（12）--Flex 布局教程：实例篇

    原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只 ...

  4. 二、Flex 布局教程：实例篇

    注:本文转自大神阮一峰,自己加了少许改动~ 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解 ...

  5. Flex 布局教程：实例篇【转】

    Flex 布局教程:实例篇   作者: 阮一峰 日期: 2015年7月14日 原文:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html ...

  6. Flex 布局教程：语法篇 【转】

    Flex 布局教程:语法篇   作者: 阮一峰 日期: 2015年7月10日 原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网 ...

  7. 杂谈PID控制算法——最终篇：C语言实现51单片机中的PID算法

    真遗憾,第二篇章没能够发表到首页上去.趁热打铁.把最终篇——代码篇给发上来. 代码的设计思想请移步前两篇文章 //pid.h #ifndef __PID__ #define __PID__ /*PID ...

  8. #企业项目实战 .Net Core + Vue/Angular 分库分表日志系统六 | 最终篇-通过AOP自动连接数据库-完成日志业务

    教程预览 01 | 前言 02 | 简单的分库分表设计 03 | 控制反转搭配简单业务 04 | 强化设计方案 05 | 完善业务自动创建数据库 06 | 最终篇-通过AOP自动连接数据库-完成日志业 ...

  9. 我罗斯方块最终篇（Player类、Game类）

    我罗斯方块最终篇(Player类.Game类) |--------------------项目GitHub地址--------------------| 目录 我罗斯方块最终篇(Player类.Gam ...

随机推荐

  1. ListView、DataGrid 不显示列标题

    <!--ListView不显示列标题--> <Style TargetType="{x:Type GridViewColumnHeader}"> <S ...

  2. 使用Atom编写Makedown

    Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器. Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 作为一个Gi ...

  3. SAP CRM和C4C数据同步的两种方式概述:SAP PI和HCI

    SAP Cloud for Customer(C4C)和SAP其他传统产品进行数据同步的方式,如下图所示,可以使用SAP Netweaver Process Integration或者SAP HANA ...

  4. Association, Composition and Aggregation in UI5, CRM, S/4HANA and C4C

    UI5 UI5使用Association和Aggregation描述控件之间的关系. Aggregation:parent和子控件在lifecycle上存在依赖关系: When a ManagedOb ...

  5. Xcode 自定义控件创建及触发事件

    #pragma mark 控制器的view加载完毕的时候调用 //一般在这里进行界面的初始化 - (void)viewDidLoad { [super viewDidLoad]; NSLog(@&qu ...

  6. 新建一个controller并指定为默认的方法

    在之前的项目中升级了MVC的DLL导致一开始程序运行时走的controller的有参构造方法变为走无参构造方法,但是该controller没有无参的构造方法,为了强制让程序走有参的构造方法,就在glo ...

  7. DOM(一)：节点层次－Node类型

    Node类型DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现,每个节点都有一个nodeType属性,用于表明节点的类型.节点类型由在Node类型中定义的下列12个数值常量来表示, ...

  8. 项目 XXX 受源代码管理。向源代码管理注册此项目时出错。建议不要对此项目进行任何修改

    原本带vss或者svn管理的项目独立复制出来后,如果出现下面问题 解决办法: 使用记事本打开,项目csproj文件删除图中

  9. 利用Kettle转储接口数据

    1.     项目背景 1.1.  项目背景 数据接口 API:应用程序接口(Application Program Interface)的简称,是实现计算机软件之间数据通信的工具.同时API也是一种 ...

  10. 深入理解restfulAPI和 Oauth2.0（精简版）

    一.restfulAPI 1.解释: restfulAPI协议,我们也可以说是一套API接口编写风格. 它被现在很多企业所认可和默认,是一套成俗的API接口编写方案. 2.restfulAPI之资源 ...