淘宝flexible.js文件实现弹性布局

淘宝flexible.js到底是用来做啥的

优点
1、提供了用一套 css 去适应多种屏幕的方法 *
2、不用考虑适应屏幕的高宽比、物理尺寸等，切图成本比较低

缺点
只用这个方案去做，得到的是一个静态布局，所有的东西都是没有流动性的，比如横竖屏改变布局的响应式布局就做不了！

现在慢慢没多少人使用这个方法了吗？现在比较流行的是vh吗？

立即执行函数：

立即执行函数：不需要调用，能够自己立即执行的函数
立即执行函数最大的作用是独立创建了一个作用域,里面的变量都会是局部变量,不会有命名冲突的情况

//一个页面有两个立即调用函数  中间要用分号
//两种区别只是  最后的小括号 是否在 最开始的小括号里面；
//这个小括号可以看作是已经调用上面的函数
//(function() {})();  和  (function() {}() )   (function(a, b) {console.log(a + b);})(1, 2);(function(a, b) {console.log(a + b);var num = 10; //局部变量}(2, 3));

pageshow与load 区别

功能：重新加载页面(a\f5 \ 前进后退)触发的事件
pageshow:全部浏览器都能重新加载
load:在火狐上会缓存不重新加载，所以不会重新计算

淘宝flexible.js源码

// 立即执行函数
(function flexible(window, document) {//这个是HTML的根元素var docE1 = document.documentElement;//dpr 物理像素比var dpr = window.devicePixelRatio || 1;//设置body的字体大小function setBodyFontSize() {if (document.body) {document.body.style.fontSize = (12 * dpr + 'px')} else {//如果页面中没有body这个元素,则等页面中主要的DOM元素加载完毕再去设置body的字体大小document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();//设置html元素的文字大小   set 1rem=viewwidth/10// clientWidth 读取元素的宽度,包含padding值的function setRemUnit() {var rem = docE1.clientWidth / 10docE1.style.fontSize = rem + 'px'}setRemUnit()//reset rem unit on page resize  当页面尺寸大小发生变化时就重新设置rem的大小window.addEventListener('resize', setRemUnit);//pageshow:重新加载页面(a\f5 \ 前进后退)触发的事件 都ok// load:重新加载页面(a\f5 \ 前进后退)触发的事件  火狐不兼容window.addEventListener('pageshow', function(e) {//e.persisted返回的是true   // 意思是如果 这个页面是从缓存取过来的,也需要重新计算一下rem值 if (e.persisted) {setRemUnit()}})//detect 0.5px supports//有些浏览器不支持0.5px写法if (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '5px solid transparent'fakeBody.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docE1.classList.add('hairlines')}docE1.removeChild(fakeBody)}
})(window, document); //这个小括号里的参数就表明调用了这个函数

ps：最难的点在于：让所有浏览器支持0.5px写法

淘宝flexible.js文件实现弹性布局相关推荐

淘宝flexible.js+rem适配pc端
1.引入flexible.js文件: (function flexible(window, document) {var docEl = document.documentElement;var dp ...
手机淘宝——flexible.js 移动端自适应方案
一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/ar ...
淘宝flexible.js的使用
首先大家最关注的怎么使用,原理不原理是后面的事比如设计稿量来的宽度是100px 那么我们布局的时候,就这么写{width:1.3333rem},1.3333rem是由100/75算出来的,以此类推2 ...
JS安全防护算法与逆向分析——淘宝登录JS加密算法
淘宝登录JS加密算法 <反爬虫AST原理与还原混淆实战>书稿内容声明:本教程从安全角度出发讲解,只为增加读者的安全知识,提升读者数据安全意识,以及对于病毒和钓鱼网站的防护能力.绝无其他任 ...
Java实现HMacMD5加密，用于淘宝客JS 组件 API 调用时生成 sign 的签名
原文:Java实现HMacMD5加密,用于淘宝客JS 组件 API 调用时生成 sign 的签名源代码下载地址:http://www.zuidaima.com/share/1550463397874 ...
flexible.js实现rem自适应布局
第一步:下载flexible.js,并引入该文件第二步(可以省略):可以根据计算方便,去修改计算比例,flexible默认是10,我这里修改成了24 第三步:下载cssrem扩展插件(步骤如图) 让 ...
web第一课模拟淘宝设置静态网页——html+css布局设计
学会使用webstorm 先打开webstorm(注意需要破解)然后注意首次打开之后会出现让你新建一个存放所有文件的目录(如下图所示文件保存在c盘路径为C:\Users\baitianmeng\Web ...
深度：中老年网民电商渗透率超40%，拼多多/淘宝/京喜/有赞如何布局老年电商市场？
子女的引导,老年大学的学习,社交圈的交流同化,面对原来相对复杂的线上购物模式,老年人群正变得越来越适应,并且在快速形成购物习惯: 事实上,已经触网的1亿银发人群中线上购物的渗透率已超过40%,并且保持 ...
解决php导入淘宝助理csv文件乱码问题及解析
用php导入csv文件很多时候会出现中文乱码的情况,特别是导入淘宝助理数据包,在网上查了很多转码方法,都无法解决问题,这是什么原因呢? 首先,淘宝助理导出的csv文件为UTF-16LE编码,很少见是吧 ...