大家好，时隔一年多了，前几篇探讨的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. Python OOP 面向对象

    1.Python实现OOP可以概括为三个概念: 继承:基于Python属性查找 多态:在x.method中,method的意义取决于x的类型 封装:方法和运算符实现行为,数据隐藏是一种惯例 2.委托: ...

  2. openwrt定制管理

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/qianguozheng/article/details/24673097 近期这个比較火,可是改了东 ...

  3. 快餐店之间插入仓库，路最短，DP，POJ(1485)

    题目链接:http://poj.org/problem?id=1485 暂时我还没想出思路求路径.哈哈哈,先写一下中间步骤吧. #include <stdio.h> #include &l ...

  4. 课程设计__继承与派生，重载<<

    ///继承与派生 #include <iostream> using namespace std; class Point { public: Point (,):x(a),y(b) {} ...

  5. MongoDB在MFC下使用C++驱动编译错误的解决

    .post p{text-indent: 2em;} 今天使用MongoDB的C++驱动,在编译连接的时候一直出现错误,显示的string_data.h下93行max宏的问题,可视其本身并不是调用ma ...

  6. Entityframework对应sqlserver版本问题

    修改.edmx文件中 providermanifesttoken 的值

  7. 关于 export default 和 export

    // 第一组 export default function crc32() { // 输出 // ... } import crc32 from 'crc32'; // 输入 // 第二组 expo ...

  8. springboot整合activiti报错[processes/]不存在解决方案

    springboot整合activiti时,启动抛异常 nested exception is java.io.FileNotFoundException: class path resource [ ...

  9. python基础数据类型之列表,元组操作

    一.列表的索引和切片1.列表的索引列表和字符串一样样拥有索引 lst = ["a","b","c"] print(lst[0]) # 获取第 ...

  10. Docker自学纪实（四）搭建LNMP部署wordpress

    我们在工作中最常用的就是LNMP网站平台 这个架构呢,是整个公司网站的核心 如果对于访问量较小的网站,可以直接在服务器上面部署 而如果是访问量很大的网站,那负载就是个很大的问题. 要么需要再买很多服务 ...