<!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. nginx+uwsgi+django

    上一涨讲解了如何使用nginx+uwsgi部署wsgi application 其实django配置方式和 application都一样,因为如果我们对application进行扩展就是一个WSGI ...

  2. Rust语言：安全地并发

    http://www.csdn.net/article/2014-02-26/2818556-Rust http://www.zhihu.com/question/20032903 Rust是近两年M ...

  3. WIN7 IIS ASP网站 打不开的解决办法

    WIN7 IIS ASP网站 打不开,通常是访问ACCESS数据库的报错了但在未对IIS和IE作设置的情况,是不能正确的显示错误的,从而也不能解决问题 为解决这个问题,我在网上找了很久,虽然最终解决了 ...

  4. BZOJ 1005 明明的烦恼

    Description 自从明明学了树的结构,就对奇怪的树产生了兴趣...... 给出标号为1到N的点,以及某些点最终的度数,允许在任意两点间连线,可产生多少棵度数满足要求的树? Input 第一行为 ...

  5. maven解决.lastUpdated maven无法下载jar

    话说,这个问题困扰了我两个多月了已经~~~ 后来发现不知道被谁动了,把我的仓库没有放到仓库组里面~~~ 用admin登录进去,默认密码是admin123,然后看截图操作吧. (记得删除你本地报错说** ...

  6. Hibernate如何一个类映射两个表

    一个User类有username,password属性,还有 otherInformation等其他属性,username和password映射到一个表,otherInformation等其他属性映射 ...

  7. 使用spring-amqp结合使用rabbitmq

    maven 依赖包配置如下: <dependencies> <dependency> <groupId>org.springframework.amqp</g ...

  8. France \'98（概率）

    题目描述 Today the first round of the Soccer World Championship in France is coming to an end. 16 countr ...

  9. BZOJ1572: [Usaco2009 Open]工作安排Job

    1572: [Usaco2009 Open]工作安排Job Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 775  Solved: 337[Submit ...

  10. POJ-3294-Life Forms（后缀数组-不小于 k 个字符串中的最长子串）

    题意: 给定 n 个字符串,求出现在不小于 k 个字符串中的最长子串. 分析: 将 n 个字符串连起来,中间用不相同的且没有出现在字符串中的字符隔开,求后缀数组. 然后二分答案,将后缀分成若干组,判断 ...