<!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. windows下搭建PHP环境

    1.Apache 下载地址:http://httpd.apache.org/download.cgi 下载之后进入CMD,/Apache/bin/httpd.exe -k install 进行安装 提 ...

  2. uitextfield动态限制输入的字数-b

    1.定义一个事件: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...

  3. Ubuntu下安装和配置Apache2

    http://www.blogjava.net/duanzhimin528/archive/2010/03/05/314564.html 在Ubuntu中安装apache 安装指令:sudo apt- ...

  4. 转:.NET中使用Redis (二)

    原文来自于:http://blog.jobbole.com/83824/ 原文出处: 寒江独钓   欢迎分享原创到伯乐头条 很久以前写了一篇文章 .NET中使用Redis 介绍了如何安装Redis服务 ...

  5. 转:2014 年 15 款新评定的最佳 PHP 框架

    原文来自于:http://blog.jobbole.com/59999/ 原文出处: codegeekz   译文出处:oschina   欢迎分享原创到伯乐头条 通常,框架都会被认为是帮助开发者快速 ...

  6. Polyfills

    填充物..github上比较全的列表 IE总是有填不完的坑,在此总结一下,可能暂时都是一知半解,错了我会慢慢改的. 首先html5标签需要填充一些class,可以用html5.js处理,或者html5 ...

  7. Linux&shell之Shell脚本

    写在前面:案例.常用.归类.解释说明.(By Jim) 使用多条命令shell脚本的关键是可以输入多条命令,甚至可以将一条命令的结果传递给另一条命令.date;who(两个命令shell脚本的写法) ...

  8. bzoj2789

    这种题目肯定是先把一个当做标准串根据标准串得出一个初始串是怎么排列的,然后求逆序对数就可以了但是因为有重复,我们不知道标准串中的一个数到底是由原来哪个字母交换来的但是我们可以猜,不难贪心得到对于标准串 ...

  9. 「Poetize3」绿豆蛙的归宿

    描述 Description 给出一个有向无环图,起点为1终点为N,每条边都有一个长度,并且从起点出发能够到达所有的点,所有的点也都能够到达终点.绿豆蛙从起点出发,走向终点.到达每一个顶点时,如果有K ...

  10. Unique Binary Search Trees——LeetCode

    Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...