大家好，时隔一年多了，前几篇探讨的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. graphql 项目搭建（二）

    一.Express基本框架 1.新建一个文件夹gql-server vscode 打开项目,在终端下输入yarn init -y 生成package.json 包(如果没安装yarn ,npm也一样, ...

  2. Hybris开发环境的license计算实现

    每隔30天,必须重新执行一次initialize命令把本地所有数据全部清掉然后重新build,需要花费一些时间. 显示在console里的license信息通过license.jsp展示: 剩余的li ...

  3. Selenium入门18 断言

    自动化测试需对比实际结果与预期结果,给出测试结论. 1 条件判断 if ...else... 2 assert ... #coding:utf-8 #断言 from selenium import w ...

  4. BestCoder Round #91 1002 Lotus and Horticulture

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6012 题意: 这几天Lotus对培养盆栽很感兴趣,于是她想搭建一个温室来满足她的研究欲望. Lotus ...

  5. centos 7jenkin+git 安装

    jenkins+git配置 背景:用git管理源代码,所以需要jenkins安装Git Plugin插件配置 准备: 1.linux环境git客户端 2.jenkins环境 + git plugin插 ...

  6. this指针和类的继承

    神秘的家伙 在对象的世界里,有一个特殊的指针,它叫做this.我们从来没有见过他,但是他却从来都存在.我们通过一个典型的例子来认识它: class Human { char fishc; Human( ...

  7. 开发者不容错过的10款免费JavaScript游戏引擎

    摘要:使用HTML5.JavaScript可以帮助开发者开发出各种与众不同的游戏及游戏特效,比如3D动画.Canvas等.本文介绍10款被广泛使用的基于HTML5的JavaScript游戏引擎. 在G ...

  8. 第6章 新建工程-寄存器版—零死角玩转STM32-F429系列

    第6章     新建工程—寄存器版 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fireg ...

  9. Mybatis异常:java.lang.NumberFormatException: For input string: "S"

    MyBatis异常日志如下: Caused by: java.lang.NumberFormatException: For input string: "S" at sun.mi ...

  10. 关于vue中的nextTick深入理解

    定义［nextTick.事件循环］ nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新 ...