大家好，时隔一年多了，前几篇探讨的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. 搭建TFTP服务器配置

    实验内容: TFTP是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议,提供不复杂,开销不大的文件传输服务.TFTP承载在UDP上,提供不可靠的数据传输服务,不提供存取授权与认 ...

  2. DEM精度评价自动化系统的成果展示

     程序员:左正康 完成时间:2013/12/3 系统开发背景: 原始的DEM精度评价方法:采用ArcGIS结合Excel的方式完成DEM的精度评价.具体操作是:利用ArcGIS工具箱中的创建TIN,T ...

  3. mmap内存映射

    http://blog.csdn.net/kongdefei5000/article/details/70183119 内存映射是个很有用,也很有意思的思想.我们都知道操作系统分为用户态和内核态,用户 ...

  4. Poj(1703),种类并查集

    题目链接:http://poj.org/problem?id=1703 已经不是第一次接触种类并查集了,直到今天才搞懂. 感谢红黑联盟,感谢杰哥!!! 每个节点只要关系确定,不管是不是同一个集合里面, ...

  5. jdk8环境变量 jdk8图解安装 java8安装

    JDK8 是JDK的最新版本,加入了很多新特性,如果我们要使用,需要下载安装: JDK8在windows xp下安装有点问题,所以在WIN7下安装 WIN7操作系统有32位和64位,分别要下载对应的J ...

  6. ImportError: No module named images

    ［问题］ 在使用学习wxPython时,一个Dem抱有如题所示错误 ［解决］ images 只不过是wxpython自带demo中的一个文件 体验wxpython IN action的时候Import ...

  7. Http之基础

    简介 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准. HTTP是一个基于TCP/I ...

  8. ES6初识-Symbol

    Symbol的概念 变量是独一无二的 let a1=Symbol(); let a2=Symbol(); a1和a2严格意义不相等 let a3=Symbol.for('a3'); let a4=Sy ...

  9. Exception occurred during processing request: The given object has a null identifier: com.zsn.crm.Model.SaleVisit; nested exception is org.hibernate.TransientObjectException: The given object has a nu

    edit.jsp页面没有加入隐藏字段 id ,导致模型驱动封装时缺少id ,,调用update更新数据库时出错!

  10. 汇编:输出寄存器AX中的内容

    DATAS segment Temp db '0000H','$' DATAS ends CODES segment START: mov AX,DATAS mov DS,AX ;正式代码开始 mov ...