## flexible.js原理 实现目标： 让网页在各终端上的展示效果就像缩放设计稿图片一样，在不同屏幕上等比缩放，每一个元素与整体比例保持不变，真实还原设计稿。 ~~~ 设页面宽度为P（单位px） 设计稿宽度为750px 设html基准值为X（单位px） ---- 首先将页面分为100份，份的单位为F 设1F的像素值为A（单位px/F） 那么： P = 100F * A A = P/100F 当P为750时，A=7.5px/F，即一份为7.5px 有没有感觉这个A有点熟悉，没错它就是X，上面份的单位F其实就是rem。 （html font-size的基准值单位虽然写为px，但其实是px/F，这点你知道就可以了） 现在懂了吧。 rem的原理就是份，我们根据设计稿得到元素的份，写到代码中的也是份，现在只要动态改变html的基准值，就能够在不同屏幕下适配，从而还原设计稿尺寸了。 所以flexible.js的原理主要是： window.onresize = function() { html.size = P/100 + 'px' } 当然针对高清屏，它还会设置“viewport scale”，以缩放页面，解决类似高清屏下无法实现1px边框等问题。 ~~~ **需要注意的是，基准值其实是个动态值哦，只是在写代码时，我们是按照设计稿宽度计算的基准值写的rem，即以设计稿为标准进行屏幕适配的（将设计稿用代码还原成UI界面），但在实际运行时，页面宽度是动态的，所以基准值也是动态的哦。** * * * * * [手机端页面自适应解决方案—rem布局进阶版（附源码示例） - 简书](https://www.jianshu.com/p/985d26b40199) > “无论在什么显示设备下你量取这个元素的尺寸大小都是一样的。”这肯定不行啊，不符合逻辑啊，iphone6上2厘米的按钮合适，但是如果iphone4上还是2厘米就显得很大了，整体不协调了，肯定不行啊，我用px就没事，大小不管在哪里看都是协调的，你现在说要一致，用尺子量一致，怎么会有这种需求。是不是我理解错了啊？ [淘宝 flexible.js 漏洞修补：记一次 rem 踩坑记录](https://mp.weixin.qq.com/s/DkDDYXaeQ8B0RScKaXrplg) [前端移动端适配总结](http://mp.weixin.qq.com/s/-22kMEXf0S-1okqXw40OqQ) > 响应式针对的是不同分辨率设备而进行的适配式设计，以利用@media规则为主要手段，而自适应则忽略@media以比例布局为主，目的是适应不同的浏览器窗口大小。 [使用Flexible实现手淘H5页面的终端适配_双11前端技术连载, Layout, mobile 教程_w3cplus](https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html) [The Ultimate Guide To iPhone Resolutions](https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions) [分享手淘过年项目中采用到的前端技术](https://mp.weixin.qq.com/s/Ey9SbQcacfW7celMSWyBRg) [再聊移动端页面的适配_Layout, 布局, mobile, CSS 教程_w3cplus](https://www.w3cplus.com/css/vw-for-layout.html) > 那么时代在变化，前端技术在不断的变化，试问：Flexible还是最佳方案？Flexible还有存在的必要吗？ 最近一直在探讨这方面，这里先告诉大家Flexible已经完成了他自身的历史使命，我们可以放下Flexible，拥抱新的变化。 [七个你可能不了解的CSS单位_CSS, 长度单位, vh, vw, vmin, vmax 教程_w3cplus](https://www.w3cplus.com/css/7-css-units-you-might-not-know-about.html) [CSS实现长宽比的几种方案_CSS3 教程_w3cplus](https://www.w3cplus.com/css/aspect-ratio.html) [移动端设计必学，移动UI设计基础入门教程-慕课网](https://www.imooc.com/video/15628) [浅谈移动前端适配](http://mp.weixin.qq.com/s/galkWjwZzjTk_thcAlVTeA) > px在不同的屏幕尺寸上会展示为定宽，这就导致我们的页面可能会出现滚动条或者占不满的情况。 > > PS软件新建图像，填写的像素 就是 物理像素个数 [Retina 屏幕下的 1px 边框(2015-09-20更新)  |  XINRAN LIU](https://xinranliu.me/2015-05-09-1px-in-retina/) [手机淘宝的flexible设计与实现 - 像winter一样冷 - 前端乱炖](http://www.html-js.com/article/2402) [移动端 Retina屏 各大主流网站1px的解决方案 - surfaces - 博客园](https://www.cnblogs.com/surfaces/p/5158582.html) > Retina屏下，你将永远无法写出1px宽度的东西，除此之外，inline的SVG等元素，也会按照逻辑像素来渲染，整个页面的清晰度会打折； [如何在Vue项目中使用vw实现移动端适配_vw, Layout, 布局, Vue, mobile 教程_w3cplus](https://www.w3cplus.com/mobile/vw-layout-in-vue.html) [移动前端自适应适配布局解决方案和比较-前端开发博客](http://caibaojian.com/mobile-responsive-example.html) [网易和淘宝移动WEB适配方案再分析](https://zhuanlan.zhihu.com/p/25216275) [移动端适配方案(下) - WEB前端 - 伯乐在线](http://web.jobbole.com/90084/) > 这么设置的好处是可以让不同设备的rem或px都显示一样的长度。 > > **这句话怎么理解？** 不同设备是指不同像素密度的屏幕还是屏幕尺寸不一样（设备像素不一样） > > 这样组合有四种可能： > `密度相同，尺寸不同` > `密度相同，尺寸相同` > `密度不同，尺寸不同` > `密度不同，尺寸相同` * * * * * last update：2018-7-19 15:42:43