<!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. 快递鸟API接口调用代码示例（免费不限量）

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...

  2. 存储过程中的where in实现

    在项目中使用Npoco时发现where in查询总是不能起作用.寻觅了许久终于找到解决方案,特此记录下: ) Set @p='CoreRole,CorePassword,CoreOnlineUser' ...

  3. 13. Android框架和工具之 Android Drawable Factory

    1. AndroidDrawableFactory 一个生成Android应用所需尺寸图片的工具. 托管在Github之中: https://github.com/tizionario/Android ...

  4. 沈逸老师PHP魔鬼特训笔记（1）

    此课程个人开发环境可以考虑使用Ubuntu ,推荐sublime和PhpStorm作为开发环境.一.PHP的一大特性是:脚本语言.不要编译,写完就可以运行? 然而并不是....... PHP代码要想运 ...

  5. ArcGIS 投影转换（AE）

    private void btnOK_Click(object sender, EventArgs e) { try { CheckError(); this.checkEdit1.Enabled = ...

  6. 查询SQL SERVER数据库日志工具

    在SQL SERVER中查看操作日志,一直是一个比较麻烦的事情,因为微软并没有提供直接的系统工具可以查看日志内容,虽然可以通过非正式的隐藏接口dbcc log 获取日志的非解析编码但是要还原是个非常麻 ...

  7. Java Scoket编程

    Java Scoket编程 一,网络编程中两个主要的问题 一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后如何可靠高效的进行数据传输. 在TCP/IP协议中IP层主要负责网络主机的定位, ...

  8. 剑指Offer36 数字在排序数组中出现的次数

    /************************************************************************* > File Name: 36_Number ...

  9. sql 游标例子 根据一表的数据去筛选另一表的数据

    sql 游标例子 根据一表的数据去筛选另一表的数据 DECLARE @MID nvarchar(20)DECLARE @UTime datetime DECLARE @TBL_Temp table( ...

  10. js继承关系

    跟传统面向对象语言比起来,js在继承关系方面比较特别,如果第一次看恐怕会有些抓狂,偶就是这样(又透露小白本质#=_=),从哪里说起好呢?函数调用? js中函数的调用方式大致可分以下几种: 1. 普通函 ...