04. 移動web-簡潔高效的rem適配方案flexble.js

flexble.js

``` 1.手機淘寶團隊出品：簡潔高效，移動端適配庫 2.不須要寫媒體查詢了，裏面js作了處理 3.原理：把當前設備劃分爲10等分，可是不一樣設備下，比例仍是一致的 4.咱們只要肯定好當前設備的html文字大小就能夠了 好比：當前是750px，只須要把html文字大小設置爲75px（750px/10）就能夠 5.裏面頁面元素rem值：頁面元素的px值/75 剩餘的，讓flexible.js來去算 6.修改flexible的默認html字體大小： @color:pink; div{ color:@color; } @media screen and (min-width:750px){ html{ font-size: 75px!important; } } div{ min-width: 320px; max-width: 750px; width: 10rem; margin: 0 auto; line-height: 2.5em; background-color: @color; color: #000; } ```

下載並引入flexble.js

``` //https://github.com/amfe/lib-flexible ```

一個神奇的vscode插件cssrem

``` 1.自動把px轉換爲rem 2.插件默認的文字大小爲16px，須要更改默認字體大小 3.修改插件內默認文字大小（根據設計稿改成75px) 步驟：左下角-設置-用戶-功能-終端-搜索cssrem-font-size-重啓編輯器 ```