<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>无标题文档</title>
<style>
*{
    padding:0;
    margin:0;
}
body{
    background:#000;
}
div{
    width:6.4rem;
    height:5rem;
    margin:0 auto;
    line-height:5rem;
    font-size:.3rem;
    text-align:center;
    color:#fff;
    background:red;
}
</style>
</head>

<body>
<div>我是测试的</div>
<script>
;!function(top){
    var doc=top.document;
    top.SetSize=function(width){
        this.obj=doc.querySelector('html');
        this.width=width;
        this.fontSize=100;
        this.init().resize();
    };
    SetSize.prototype={
        init:function(){
            this.scale=this.obj.clientWidth/this.width;
            this.obj.setAttribute("style","font-size:"+(this.scale*this.fontSize)+"px !important");
            return this;
        },
        resize:function(){
            top.addEventListener('resize',this.init.bind(this),false);
        }
    };
    SetSize.prototype.constructor=SetSize;
    doc.addEventListener('DOMContentLoaded',function(){
        new SetSize(640);
    },false);
}(parent);
</script>
</body>
</html>

移动页面缩放方法之（三）rem布局的更多相关文章

  1. 移动端(手机端)页面自适应解决方案1（rem布局）---750设计稿

    设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作流程一般分为下面两种: 网易做法: 页面开头处引入下面这段代码,用于 ...

  2. 移动页面缩放方法之（二）控制HTML

    <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Con ...

  3. 移动页面缩放方法之（一）控制meta法

    <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta http-equiv="Con ...

  4. CSS实现三列布局

    三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...

  5. 移动端rem布局实现（vw）

    什么是rem?在W3C官网上是这样描述的:“font size of the root element (根元素的字体大小)”.就是说rem是相当于html的,因为网页的默认字体大小是 16px,所以 ...

  6. H5 页面 rem 布局适配方法

    rem 布局适配方案 主要方法为: 按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大小: css 中,设计稿元素的宽.高.相对位置等取值,按照同等比例换算为 re ...

  7. 手机端页面自适应：rem布局

    rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...

  8. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  9. 手机端页面自适应解决方案—rem布局（进阶版，附源码示例）

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

随机推荐

  1. spoj SORTBIT - Sorted bit squence

    Let's consider the 32 bit representation of all integers i from m up to n inclusive (m ≤ i ≤ n; m × ...

  2. 简明解释算法中的大O符号

    伯乐在线导读:2009年1月28日Arec Barrwin在StackOverflow上提问,“有没有关于大O符号(Big O notation)的简单解释?尽量别用那么正式的定义,用尽可能简单的数学 ...

  3. BZOJ 1069 最大土地面积

    Description 在某块平面土地上有N个点,你可以选择其中的任意四个点,将这片土地围起来,当然,你希望这四个点围成的多边形面积最大. Input 第1行一个正整数N,接下来N行,每行2个数x,y ...

  4. 【Java】在Eclipse中使用JUnit4进行单元测试（初级篇）

    本文绝大部分内容引自这篇文章: http://www.devx.com/Java/Article/31983/0/page/1 我们在编写大型程序的时候,需要写成千上万个方法或函数,这些函数的功能可能 ...

  5. 转一篇NGINX+UWSGI+PYTHON+DJANGO部署文档

    高远弄的,,专业,明晓..感谢哈哈. http://blog.csdn.net/tmpbook/article/details/42873667

  6. 执行计划中常见index访问方式(转)

    近期有朋友对于单个表上的index各种情况比较模糊,这里对于单个表上,单个index出现的大多数情况进行了总结性测试,给出了测试结果,至于为什么出现这样的试验结果未做过多解释,给读者留下思考的空间.本 ...

  7. Unity C# 游戏间物体间的访问

    脚本语言:C# 1.在Unity工程中新建两个物体:Cube和Sphere 2.分别为Cube和Sphere添加脚本CubeScript和SphereScript: 在SphereScript这两个定 ...

  8. Poetize4 创世纪

    3037: 创世纪 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 123  Solved: 66[Submit][Status] Description ...

  9. （转载）php flush()刷新不能输出缓冲的原因分析

    (转载)http://www.webkaka.com/tutorial/php/2012/110628/ 在php程序编写中,flush()的使用率还是挺高的,它在网页表现即时信息效果时发挥了极为重要 ...

  10. Adjacent Bit Counts（动态规划 三维的）

    /** 题意: 给出一个01串 按照题目要求可以求出Fun(X)的值 比如: 111 Fun(111)的值是2: 输入: t (t组测试数据) n k (有n位01串 Fun()的值为K) 输出:有多 ...