flexible.js源码解析

本文详细探讨了flexible.js的实现原理,包括响应式布局的设置、DPR适应及 rem 单位的运用,旨在帮助开发者更好地理解和运用该库。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

(function flexible (window, document) {
  // 获取页面root根元素 html
  // 跟 document.body 获取的是 页面的 body 元素
  var docEl = document.documentElement
  // window.devicePixelRatio设备像素比
  // 默认为 1
  /**
   * [dpr description]
   * @type {[type]}
   * 设备像素比(device pixel ratio)
   * 设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系。
   * 它的值可以按下面的公式计算得到:
   * 设备像素比 = 设备物理像素 / 设备独立像素
   * 设备物理像素是指设备的实际像素
   * 设备独立像素就是指平常我们写 CSS 样式的 px 像素
   * 计算公式: 1px = (dpr)^2dp;
   */
  /**
   * [dpr description]
   * @type {[type]}
   * 基于rem的原理,我们要做的就是: 
   * 针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)。
   * 这里我们提取了一个公式(rem表示基准值)
   * rem = document.documentElement.clientWidth * dpr / 10
   */
  /**
   * [dpr description]
   * @type {[type]}
   * 乘以dpr,是因为页面有可能为了实现1px border页面会缩放(scale) 1/dpr 倍(如果没有,dpr=1),。
   * 除以10,是为了取
博客
v8worker
05-08 2960
05-06 2943
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值