<!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. LeetCode11 Container With Most Water

    题意: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, a ...

  2. 1.7.2 Velocity Search UI

    1. Velocity Search UI solr包含了一个简单的搜索UI界面,是基于VelocityResponseWrite(也被叫做 Solritas)的.这里演示了几个有用的功能,如搜索,分 ...

  3. 【Android 界面效果33】二级listview列表

    今天来实现以下大众点评客户端的横向listview二级列表,先看一下样式. 这种横向的listview二级列表在手机软件上还不太常见,但是使用过平板的都应该知道,在平板上市比较常见的.可能是因为平板屏 ...

  4. 懒人福利:Xcode插件将JSON格式化输出为模型的属性->ESJsonFormat-Xcode

    这是一个直接将json数据转换为模型数据的插件,只需要在控制台输入json数据,就可以在模型文件的.h文件中生成对应的模型数据 对于模型套模型的数据也做了处理,比较方便. 有需要的人可以尝试一下,但不 ...

  5. web前端开发（5）

    CSS的一些问题: 一般情况下,尽量使用class选择器 解决点击超链接后hover 样式不出现多次问题:a:visited  a:hover 的顺序是问题所在,记住 love hate  L(lin ...

  6. linux初学 :简易的shell脚本

    什么是shell Shell本身是一个用C语言编写的程序,它是用户使用Unix/Linux的桥梁,用户的大部分工作都是通过Shell完成的 Shell有两种执行命令的方式: 交互式(Interacti ...

  7. poj 2029 二维树状数组

    思路:简单树状数组 #include<map> #include<set> #include<cmath> #include<queue> #inclu ...

  8. POJ 3921 Destroying the bus stations 沿着最短路迭代加深搜索

    题目:给出一个图,问最少删除多少个点,使得从点1到点n经过的点数超过k个. 分析: 上网搜了一下,发现很多人用网络流做的,发现我不会.再后来看到这篇说网络流的做法是错的,囧. 后来发现点数有点少,直接 ...

  9. 手机app（功能）测试重点

    在手机客户端进行查看的测试重点:1.“点击加载更多”的分页处理技术,是否有重复的数据,数据显示是否完整,到达最后一页后是否还有数据进行显示2.数据的排序方式2.界面跳转是否正确3.出现异常情况是否有提 ...

  10. jQuery.Hotkeys - lets you watch for keyboard events anywhere in your code supporting almost any key combination

    About jQuery Hotkeys is a plug-in that lets you easily add and remove handlers for keyboard events a ...