首先大家最關注的怎么使用,原理不原理是后面的事
比如設計稿量來的寬度是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的值
然后布局我應該怎么寫呢,貌似還是無從下手
好了,編不下去了,自己去想把,有空再編