逐行分析flexible.js源码

苏察哈尔灿xxxx

于 2021-09-05 16:29:49 发布

阅读量312

点赞数

CC 4.0 BY-SA版权

分类专栏：前端从0到1 文章标签： html5 html javascript

本文链接：https://blog.csdn.net/Lsp_Zgg01/article/details/120116938

本文详细探讨了flexible.js的实现原理，逐行分析源码，揭示了该库如何处理HTML5页面在不同设备上的响应式布局，特别是在处理CSS flexible box布局中的关键细节。

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

  //立即执行函数 , 传入了window对象和DOM对象
        (function (window, document) {
   
   
            //window.devicePixelRotio:设备像素比.
            //PC端的window.devicePixelRotio默认为一, 
            //但若通过比如操作系统的缩放功能则会更改像素比.比如我的笔记本缩放了125%,返回的就是1.25
            var body = document.body;
            var dpr = window.devicePixelRatio || 1; //物理像素比有则返回,无则默认1
            // console.log(window.devicePixelRatio);
            var docEL = document.documentElement;


            //模块一:设置body的字体大小 公式为 fontsize = 12*dpr
            function setBodyFontSize() {
   
   
                if (document.body