<!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. Asp.Net处理URL空格变%20问题

    在Web前端需要页面跳转的时候我们可能会这样子用:window.location.href = "page.html?parameters",如果刚好parameters里面带有空 ...

  2. C++ atol

    函数名: atol 功 能: 把字符串转换成长整型数 用 法: long atol(const char *nptr);   简介编辑 相关函数: atof,atoi,strtod,strtol,st ...

  3. Subsequence poj 3061 二分（nlog n）或尺取法(n)

    Subsequence Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9236   Accepted: 3701 Descr ...

  4. Java基础知识强化之IO流笔记82：NIO之 Pipe（管道）

    1. Java NIO 管道是2个线程之间的单向数据连接.Pipe有一个source通道和一个sink通道.数据会被写到sink通道,从source通道读取. 这里是Pipe原理的图示: 2. Pip ...

  5. IQueryable与IEnumberable的区别

    IEnumerable接口 公开枚举器,该枚举器支持在指定类型的集合上进行简单迭代.也就是说:实现了此接口的object,就可以直接使用foreach遍历此object: IQueryable 接口 ...

  6. Linux下C/C++程序开发管理（makefile）

    一.引言          从我们刚开始编写一个简单的C/C++ "Hello,World!",到将其编译.运行处结果—这部分工作IDE(集成开发环境)帮我们做了,包括语法错误检查 ...

  7. oracle数据操纵语言(DML)data manipulation language（续集）

    SQL查询语句(SELECT)进阶分组函数(Group Functions):对多行进行操作,并为每一组给出一个结果. AVG([DISTINCT|ALL] expression) 平均值COUNT ...

  8. python备忘录

    本文主要是记录一下python,比较详尽的python学习资料: Python学习笔记_王纯业 http://pan.baidu.com/s/1eQrDEYA 部分有详细的博文链接 1.字符串: 切片 ...

  9. 3D--知识点1

    三层架构 1.DAL(数据访问层)-->与数据库进行关联,对数据库进行增删改查操作2.BLL(业务逻辑层)-->负责加减乘除与或非操作,比如:用户注册3.UI/web(表示层) sqlse ...

  10. android百度地图中的地图缩放级别

    前期搭建百度地图的环境就不说了,网上一搜一大把,这里只讲地图的缩放,大神可以直接绕道 首先在类的内部初始化一个百度地图的对象 private BaiduMap mBaiduMap; 然后在OnCrea ...