<!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. db2索引创建和删除

    在表trpt_jv_rpt_log_td的tim列上创建索引 create index dw_rpt.irpt_jv_rpt_log_td_tim on dw_rpt.trpt_jv_rpt_log_ ...

  2. Qt如何去掉按钮等控件的虚线框（焦点框）（三种办法）

    方法1:可以通过代码ui->pushButton->setFocusPolicy(Qt::NoFocus)或在Qt Creator的属性列表中设置. 方法2:如果在嵌入式设备中需要通过按键 ...

  3. MySql密码丢失

     windows下mysql密码忘记了 第一步:netstat -nat(可以查看mysql是否启动了,如果启动了,可以用输入net stop mysql(或者通过任务管理器结束进程)) 第二步:my ...

  4. Instant Complexity(模拟，递归)

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 1535   Accepted: 529 Description Analyz ...

  5. Qt入门（10）——调试技术

    命令行参数当你运行Qt程序时,你可以指定几个命令行参数来帮助你调试.-nograb 应用程序不再捕获鼠标或者键盘.当程序在Linux下运行在gdb调试器中时这个选项是默认的.-dograb 忽略任何隐 ...

  6. 动态规划(斜率优化)：SPOJ Commando

    Commando You are the commander of a troop of n soldiers, numbered from 1 to n. For the battle ahead, ...

  7. Delphi NativeXML 乱码的问题

    我遇到 NativeXML 在它的一个节点的属性上面写入属性,但是当读出的值中包含汉字的时候出现了乱码.检查代码如下 NativeXml := TNativeXml.Create; try Nativ ...

  8. kafka log4j配置

    kafka日志文件分为5种类型,依次为:controller,kafka-request,server,state-change,log-cleaner,不同类型log数据,写到不同文件中: 区别于c ...

  9. C语言赋值运算符

    赋值运算符: 分类: 简单赋值 int a ;  a=10; 复合运算符 int a ;  a+=4; 复合位运算符 int a; a&=1:

  10. 暴力求解——素环数 Prime Ring Problem ,UVa 524

    Description A ring is composed of n (even number) circles as shown in diagram. Put natural numbers i ...