<!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. No Entertainment!

    今天决定去打印一个“No Entertainment”的横幅,贴在电脑的旁边.这其实是很久以前的事了,却搁浅到了现在.也正因为如此,今天想起来也觉得格外刻不容缓,内心好似义愤填膺,便写下这愤慨的独白. ...

  2. iOS -动态可变参数

    #import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...

  3. bootstrap表格多样式及代码

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  4. 9. Android框架和工具之 SlidingMenu（抽屉菜单）

    详见为知笔记:Android / Android用户界面优化 / Android SlidingMenu菜单栏程序设计

  5. 《MFC游戏开发》笔记三 游戏贴图与透明特效的实现

    本系列文章由七十一雾央编写,转载请注明出处. 313239 作者:七十一雾央 新浪微博:http://weibo.com/1689160943/profile?rightmod=1&wvr=5 ...

  6. MySQL中/*!40100注释

    MySQL中的注释 MySQL中的注释有三种: # 注释内容 -- 注释内容 /* 注释内容*/ 但是,在导出的SQL文件中,也会看到类似如下内容的注释: CREATE DATABASE `blog` ...

  7. cannot find module 'cordova-common'

    解决办法,重新安装cordova npm install -g cordova

  8. jQuery两个列表中元素相互交换Demo

    效果如图: <html> <head> <meta http-equiv="Content-Type" content="text/html ...

  9. 重磅消息：JavaFX官方文档翻译完毕

    经过XMan团队业余时间半年的努力,终于将JavaFX官方文档全部翻译完毕,内容已经全部在http://www.javafxchina.net中发表. 中文文档具体目录如下: 第一篇 开始学习Java ...

  10. Python之时间统计

    1. import time start_time = time.time() print('time %ds'%(time.time() - start_time))