(function flexible(window,document){

   // 获取html的根元素

   var docEl = document.documentElement;

   // dpr 物理像素比  window.devicePixelRatio 会获取当前屏幕的物理像素比，如果是pc端则为1，移动端为2。

   // 如果当前浏览器没有window.devicePixelRatio则取1

   var dpr = window.devicePixelRatio || 1;

   // 设置body的字体大小

   function setBodyFontSize(){

    // 如果页面有body这个元素，就设置body的字体大小

    if (document.body){

        document.body.style.fontSize = (12 * dpr) + 'px';

    }else{

        //否则，等待页面的主要DOM元素加载完毕再去设置body的字体大小

        document.addEventListener("DOMContentLoaded",setBodyFontSize);

    }

   }

   setBodyFontSize();

   // 核心

   // 设置html的文字大小

   function setRemUnit(){

    // 将html文档宽度划分为10等分，每一等分为一rem，即html的fontsize

    var rem = docEl.clientWidth / 10;

    docEl.style.fontSize = rem + 'px';

   }

   setRemUnit();

   // 当页面尺寸大小发生变化时，要重新设置rem的大小

   window.addEventListener('resize',setRemUnit);

   // pageshow 是我们重新加载页面触发的事件

   window.addEventListener('pageshow',function(e){

    if(e.persisted){

        // 返回的是true，说明这个页面是从缓存中去过来的页面，也需要重新计算一下rem的大小

        setRemUnit();

    }

   })

   // 下面这块不必了解

   // detect 0.5px supports  // 有些移动端浏览器不支持0.5像素的写法，下面这个解决方案可以让其支持

   if(dpr >= 2){

    var fakeBody = document.createElement('body');

    var testElement = docunment.createElement('div');

    testElement.style.border = '.5px solid transparent';

    fakeBody.appendChild(testElement);

    docEl.appendChild(fakeBody)

    if(testElement.offsetHeight === 1){

        docEl.classList.add('hairlines')

    }

    docEl.removeChild(fakeBody)

   }

}(window,document))

试例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="flexible.js"></script>

</head>

<body>

</body>

</html>

　　

flexible.js源码分析的更多相关文章

  1. basket.js 源码分析

    basket.js 源码分析 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此 ...

  2. events.js 源码分析

    events.js 源码分析 1. 初始化 // 使用 this.ee = new EventEmitter(); // 源码 // 绑定this域,初始化 _events,_eventsCount和 ...

  3. Backbone.js源码分析(珍藏版)

    源码分析珍藏,方便下次阅读! // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone ...

  4. Require.js 源码分析

    本文将简单介绍下个人对require.js的源码分析,简单分析实现原理 一.require加载资源的流程 require中,根据AMD(Asynchronous Module Definition)的 ...

  5. Vue.js 源码分析(三十一) 高级应用 keep-alive 组件 详解

    当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如: <!DOCTYPE html> ...

  6. Vue.js 源码分析(三十) 高级应用 函数式组件 详解

    函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...

  7. Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解

    对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...

  8. Vue.js 源码分析(二十八) 高级应用 transition组件 详解

    transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...

  9. Vue.js 源码分析(二十七) 高级应用 异步组件 详解

    当我们的项目足够大,使用的组件就会很多,此时如果一次性加载所有的组件是比较花费时间的.一开始就把所有的组件都加载是没必要的一笔开销,此时可以用异步组件来优化一下. 异步组件简单的说就是只有等到在页面里 ...

  10. Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解

    普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单 ...

随机推荐

  1. 数据结构 传统链表实现与Linux内核链表

    头文件: #pragma once #include<stdlib.h> //链表结点 struct LinkNode{ void *data; struct LinkNode *next ...

  2. SQLSERVER 居然也能调 C# 代码 ?

    一:背景 1. 讲故事 前些天看到一个奇怪的 Function 函数,调用的是 C# 链接库中的一个 UserLogin 方法,参考代码如下: CREATE FUNCTION dbo.clr_User ...

  3. [OpenCV实战]11 基于OpenCV的二维码扫描器

    目录 1 二维码(QRCode)扫描 2 结果 3 参考 在这篇文章中,我们将看到如何使用OpenCV扫描二维码.您将需要OpenCV3.4.4或4.0.0及更高版本来运行代码. 1 二维码(QRCo ...

  4. P7960 [NOIP2021] 报数

    简要题意 小Z在玩报数游戏,这个游戏有一个规则,就是对于一个正整数 \(x\),如果满足 \(7 \mid x\) 或 \(x\) 的十进制写法中含有 \(7\) 或是十进制写法含有 \(7\) 的倍 ...

  5. py教学之集合

    集合的概念 集合(set)是一个无序的不重复元素序列. 可以使用大括号 { } 或者 set() 函数创建集合,注意:创建一个空集合必须用 set() 而不是 { },因为 { } 是用来创建一个空字 ...

  6. 【开源】libinimini：适用于单片机的极简 ini 解析库

    介绍说明 最近自己基于 XR872 在做一个小作品练习练习,具备可以配置的功能,选择了使用 ini 作为配置文件.我调研了网上常见的 ini 解析库,几乎都涉及到了 fopen()/fgets().. ...

  7. RabbitMQ消息队列入门及解决常见问题

    RabbitMQ消息队列 同步通讯和异步通讯 微服务间通讯有同步和异步两种方式: 同步通讯:就像打电话,需要实时响应. 异步通讯:就像发邮件,不需要马上回复. 两种方式各有优劣,打电话可以立即得到响应 ...

  8. My First Blog Ever——记我在交大ACM班的第一个学期

    很巧的是,就在俞老师下发"学期小结"这一任务的前一天,我在跟朋友聊天时想到了要将自己这一学期的经历以文字的形式留存.毕竟,过去的一个学期实在有太多东西值得记述了:我离开了自己从童年 ...

  9. CesiumJS PrimitiveAPI 高级着色入门 - 从参数化几何与 Fabric 材质到着色器 - 上篇

    目录 0. 基础 0.1. 坐标系基础 0.2. 合并批次 1. 参数化几何 1.1. 几何类清单 1.2. 举例 1.3. 纯手搓几何 1.4. *子线程异步生成几何 2. 使用材质 2.1. 外观 ...

  10. MRS+LakeFormation：打造一站式湖仓，释放数据价值

    摘要:华为LakeFormation是企业级的一站式湖仓构建服务. 本文分享自华为云社区<华为云MRS支持LakeFormation能力,打造一站式湖仓,释放数据价值]>,作者:break ...