淘寶flexible.js的使用


首先大家最關注的怎么使用,原理不原理是后面的事

比如設計稿量來的寬度是100px

那么我們布局的時候,就這么寫{width:1.3333rem},1.3333rem是由100/75算出來的,以此類推200px,就是{width: 2.6667} ,2.6667是由200/75計算得來

大家會很奇怪,為什么是除以75,不是除以750,或者其他數字,難道每次都要用計算器去計算rem的值嗎

原理來了

75這個數字是這么來的,75=750/10,就是把750分成10份,可以理解成75=1份,75px=1rem,相當於計算100/75,其實就是100里面有幾份,也就是100里面有幾個rem

那要怎么實現等比縮放呢

HtmlfontSize =(window. inner Width/750)*75

然后設置 html font -size的值為HtmlfontSize 

這里設置的就是1rem=HtmlfontSize 個px

 由此我們通過動態HtmlfontSize,實現了等比縮放,好像是實現了,但是還是有點懵

為什么要這么做

那就要自己嘗試去實現等比縮放布局,還是以主流的750設計稿為例

還是以100px為例,在375的屏幕寬度,我就要寫成50px,在414的屏幕寬度我就要寫成55.2px,我們很容易得到一個公式,當前的屏幕寬度/750 ,再乘以100,就得到我們所需要的尺寸,固定的是什么,變化的又是什么

固定的是100px,控制縮放的是屏幕寬度/750的比率

為了方便布局,那我給font-size設置  屏幕寬度/750的值

然后布局我應該怎么寫呢,貌似還是無從下手

好了,編不下去了,自己去想把,有空再編

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM