<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>圣诞主题</title>

    <style type="text/css">

    section {

        width: 100%;

        height: 100%;

        background: red;

    }

    .page{

        width: 5rem;

        height: 10rem;

        background: yellow;

        font-size: 0.3rem;

    }

    </style>

</head>

<body>

    <section>

        <div class="page">rem跟着html:font-size变化</div>

    </section>

</body>

<script type="text/javascript">

var docEl = document.documentElement,

    //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，

    //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。

    //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值

    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

    recalc = function() {

        //设置根字体大小

        docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';

    };

//绑定浏览器缩放与加载时间

window.addEventListener(resizeEvt, recalc, false);

document.addEventListener('DOMContentLoaded', recalc, false);

</script>

</html>

来自：http://www.imooc.com/code/10547

js动态计算rem



!(function(doc, win) {

    var docEle = doc.documentElement,

        evt = "onorientationchange" in window ? "orientationchange" : "resize",

        fn = function() {

            var width = docEle.clientWidth;

            width && (docEle.style.fontSize = 20 * (width / 320) + "px");

        };

    win.addEventListener(evt, fn, false);

    doc.addEventListener("DOMContentLoaded", fn, false);

}(document, window));

来自：https://segmentfault.com/a/1190000003690140

自适应rem布局的更多相关文章

  1. 移动端自适应rem布局

    补充一个基本知识,不许笑,1rem等于HTML中设置的字体大小(px) 首先,HTML 的 head 部分中加入如下代码: <meta name="viewport" con ...

  2. 移动端自适应rem 布局篇

    相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex),也都能获得不错的效果,这里主要介绍的是本人在实践中用的最顺手最简单的布 ...

  3. HTML5 自适应rem布局

    (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? ' ...

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

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

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

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

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

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

  7. 手机端页面自适应解决方案—rem布局（该方案目前已过时）

    转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...

  8. 移动端(手机端)页面自适应解决方案—rem布局篇

    移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...

  9. 70.JS---利用原生js做手机端网页自适应解决方案rem布局

    利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...

随机推荐

  1. Localizing WPF with .resx files

    WPF用Resource.resX中的字符串进行国际化 增加命名空间 xmlns:prop="clr-namespace:XXAppName.Properties" 引用的地方的格 ...

  2. TCP/IP协议原理与应用笔记26：网际协议（IP）之 分片（Fragmentation）

    1. 分片(Fragmentation) 适应在不同的MTU的物理网上传输. 备注: MTU:最大传输单元,Maximum Transmission Unit,它是指一种通信协议的某一层上面所能通过的 ...

  3. Java克隆--深克隆与浅克隆的区别

    克隆,就是复制一个对象的副本,而克隆又分浅克隆和深克隆.浅克隆是指克隆得到的对象基本类型的值改变了,而源对象的值不会变.但如果被克隆对象引用类型的值改变了,那么源对象的值同样会改变,因为引用类型在栈内 ...

  4. js 每秒刷新系统时间，可停止

    <title>无标题页</title> <script language="javascript" type="text/javascrip ...

  5. hdu 4115 2-SAT判定

    思路:将每个回合的平手和赢最为一对对立状态.那么后面就是2-SAT判断了. #include<iostream> #include<cstdio> #include<al ...

  6. Table of Contents - Git

    Downloading and  Installing Git Download for Linux and Unix Integration with Eclipse Eclipse 提交工程至 G ...

  7. django 学习-15 .Django文件上传（用户注册）

    1.vim blog/views.py from django.shortcuts  import  render_to_responsefrom django.http   import HttpR ...

  8. windows使用技巧

    使用命令行工具(cmd)并总是要切换到同一个文件夹   ◆通常的办法 打开命令行工具 切换到指定盘符 切换到目录 Microsoft Windows [Version 10.0.14393] (c) ...

  9. DOS批处理命令-for语句

    for是为了循环执行一系列命令而执行的命令语句. for要处理的内容不同,语法结构稍有不同.下面就各种情形来分别 1.基本的语法:FOR %変数 IN (set) DO 命令 [参数] 语法内容解析: ...

  10. php curl 的用法 转载

    curl 是使用URL语法的传送文件工具,支持FTP.FTPS.HTTP HTPPS SCP SFTP TFTP TELNET DICT FILE和LDAP.curl 支持SSL证书.HTTP POS ...