flexible.px2rem

需求场景：
现在大部分M站的页面布局都是通过 flexible 的方案解决，flexible.js 里面提供了 px2rem 的函数方法，有些页面需要 js 中动态转换 px 为 rem 给元素设置样式，这时候就有两种方案：

自己写一个函数方法，
使用 flexible 提供的 px2rem；
本着图省事的方案，采用直接找 flexible 的方法。但是竟然在 window 下没找到。

问题排查过程：

第一步，在 index.ejs 中找到了 flexible 的初始化代码，并且把 flexible 挂在了 window.lib 下，
第二步，但是页面初始化完成之后，打印 winlow.lib，得到的却是以下结果：
第三步，思考，应该是 window.lib 被某一步复写了。找到了罪魁祸首：public/lib/debug/lib.js 中，var lib, 直接把 lib 挂在到了 window，lib 被复写！
window.lib 被调用的地方：最后会被 webpack 以 script src 的方式引入到页面中

解决方案：

修改 public/lib/debug/lib.js（开发环境）和 public/lib/min/lib.b545ebd6b.js （生产环境）的 var 为 let；亲测可行，风险小（但是不保证无风险）；
修改 flexible 初始化挂载的时候不挂载在 window.lib，修改为 window.H5fit，如下图示：（应该无风险，但是不保证）
flexible 初始化挂载的时候再增加一个window对象的赋值，无风险（冗余代码，让新人摸不着头脑）：

结论：
个人建议第二种，并且希望在后续的模板规划中规避这个问题。

flexible.px2rem相关推荐

移动端适配方案 flexible.js
前言移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...
移动端适配--flexible.js
引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...
移动端 flexible.js 布局详解
原本想直接引入原文链接,但是又担心作者哪天想不开注销账号,这么好的一篇文章看不到了,还是转载一下吧(/ω＼). 另外推荐一篇好文:移动端rem自适应实操讲解本文讲的通过 flexible.js 实现 ...
reset.css 和 flexible.js
重置css默认样式(淘宝): body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, f ...
使用Flexible实现H5页面的终端适配
使用方法建议对于js做内联处理,在所有资源加载之前执行这个js. 执行这个js后,会在html(也就是document.documentElement)上增加一个data-dpr属性,以及font- ...
CSS—移动端适配方案flexible.js
目录一.概述二.详解一.概述移动端适配一直以来都是前端开发中不可或缺的重要组成部分.flexible.js插件是一个终端设备适配的解决方案.flexible.js插件通过实现rem单位的自适应 ...
flexible.js在华某为手机上使用rem时，页面宽度超出手机屏幕宽度
问题:手机端项目在华为的某款手机上显示时页面内容没有自适应手机宽度,出现横向滚动条原因:手机获取手机屏幕宽度并计算出rem时出现偏差,明显宽余真实手机屏宽度解决方案一:在页面里获取页面最外层dom ...
移动端适配flexible.js
1.什么是flexible.js 是一个终端设备适配的解决方案. 是一个用来适配移动端的javascript框架.根据宽度的不同设置不同的字体大小,样式间距都使用rem作为单位,不同屏幕大小适配不同的 ...
react+flexible兼容分辨率
1. 先生成配置文件先git add . 然后git commit -m "init" 然后再npm run eject 运行之后会生成config文件夹 2.安装flexibl ...

flexible.px2rem

flexible.px2rem相关推荐

最新文章

热门文章