## 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