逐行分析flexible.js源码

最新推荐文章于 2024-04-07 18:10:06 发布

苏察哈尔灿xxxx

最新推荐文章于 2024-04-07 18:10:06 发布

阅读量195

点赞数

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

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

版权

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

摘要由CSDN通过智能技术生成

  //立即执行函数 , 传入了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