大家好，时隔一年多了，前几篇探讨的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. 网页打开速度优化——HTTP请求头及响应头

    no-cache:不缓存过期的资源 no-store:不缓存 最近看了<图解HTTP>这本书,书上讲到了这两者的区别: no-cache从字面意义上很容易误解为不缓存,但是no-cache ...

  2. node 上的cookie的签名和解签名

    cookie签名的原因是防止别人篡改cookie原本的值,如果这个过程中cookie被改变的话,就会在unsign方法返回false 代码: var cookie = require("co ...

  3. c++ 读入和写入文件

    读入 #include<ifstream> ifstream infile; infile.open(img_dir); while(getline(infile,tmp)){ } 写入 ...

  4. 分类算法简介 基于R

    最近的关键字:分类算法,outlier detection, machine learning 简介: 此文将 k-means,decision tree,random forest,SVM(supp ...

  5. 第34章 IWDG—独立看门狗—零死角玩转STM32-F429系列

    第34章     IWDG—独立看门狗 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fir ...

  6. JavaScript中的事件循环

    JavaScript是单线程单并发语言 单线程:主程序只有一个线程,即同一时间片段内其只能执行单个任务. 引发的问题: 单线程,意味着任务都需要排队,前一个任务结束,才会执行后一个任务.若前一个任务耗 ...

  7. vue2.0之监听属性的使用心得及搭配计算属性的使用

    我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助: 1.基础版监听: 场景如下:输入框输入你的年龄,如果 ...

  8. 查询删除的SAP凭证

    标准报表查询:RSSCD100 函数模块:CHANGEDOCUMENT_DISPLAY, Display Change Documents 数据表查询:CDHDR, Change document h ...

  9. 返回用户指定页面的web服务器

    import socket import re import os def handle_client(socket_con): """ 接收来自客户端的请求,并接收请求 ...

  10. 【PHP项目】伪静态规则

    伪静态规则写法RewriteRule-htaccess详细语法使用 2016年03月30日 16:53:59 阅读数:20340 伪静态实际上是利用php把当前地址解析成另一种方法来访问网站,要学伪静 ...