<!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. PM加油站

    老郭讲述深航CSM 1.需求有遗漏,人员水平不足:加班导致人员流失:但是这样,客户后来还是好评,并且项目被评为深航的标杆项目:老郭也是被指定为未来项目的项目经理:--!我想起了古时候的一句话:功夫在诗 ...

  2. iOS开发-网络框架-b

    网络框架(以下称NJAFNetworking)是基于AFNetworking框架的简单封装,基本功能包括POST请求,GET请求,上传文件,下载文件,网络状态,缓存等. 为什么要使用NJAFNetwo ...

  3. Unity 网络斗地主 判断牌的类型

    Unity 网络斗地主  牌的类型 web版本演示地址:   http://www.dreamhome666.com/Desktop.html 在上个版本中,下面的角色在牌的后面,可以将角色做为一个P ...

  4. C#技术分享【PDF转换成图片——13种方案】（2013-07-25重新整理）

    原文:C#技术分享[PDF转换成图片--13种方案](2013-07-25重新整理) 重要说明:本博已迁移到 石佳劼的博客,有疑问请到 文章新地址 留言!!! 写在最前面:为了节约大家时间,撸主把最常 ...

  5. input 标签左对齐

    不要忘记下载jquery包,并引用到工程文件里. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...

  6. json前后台传值

    谈到JSON,简单的说就是一种数据交换格式.近年来,其在服务器之间交换数据的应用越来越广,相比XML其格式更简单.编解码更容易.扩展性更好,所以深受开发人员的喜爱. 下面简单的写一下在项目中前后台js ...

  7. Java版将EXCEL表数据导入到数据库中

    1.采用第三方控件JXL实现 try { //实例化一个工作簿对象 Workbook workBook=Workbook.getWorkbook(new File("F://qzlx.xls ...

  8. Yii widget使用

    关于widgets,他们在yii中的关系如下 system.web.widgets 系统自带最基本的widget zii.widgets 是基本扩展 zii.widgets.grid 是基本扩展的重要 ...

  9. 高效算法——B 抄书 copying books,uva714

    Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit Status Description ...

  10. VS2015接口智能提示少了异常信息 怎么破~

    问题:我想让VS2015提示的时候也显示关于“异常”的批注信息,亲们 如何破? 下图是VS3013的提示 下图是VS2015的提示 下图是接口注释