flexible.js vsode中配置

1.什麼是flexible.js?
flexible.js是手淘開發出的一個用來適配移動端的js框架。手淘框架的核心原理就是根據制不同的width給網頁中html根節點設置不同的font-size,然後所有的px都用rem來代替,這樣就實現了不同大小的屏幕都適應相同的樣式了。其實它就是一個終端設備適配的解決方案,也就是說它可以讓你在不同的終端設備中實現頁面適配。

2.如何使用flexible.js呢?
1.首先我們在GitHub上下載它的壓縮包:https://github.com/amfe/lib-flexible

2.打開壓縮包,找到index.js文件

3.將index.js複製到我們項目的文件夾中,並且在html中引入
在這裏插入圖片描述
4.以vscode爲例
(1)安裝cssrem插件
在這裏插入圖片描述
(2)在setting.json中修改cssrem中默認的字體大小,這裏以屏幕爲750px爲例(因爲flexible.js默認將屏幕分成十份,所以我們將cssrem.rootFontSize修改爲75)
在這裏插入圖片描述
3)保存之後重新打開vscode
再當我們輸入寬度的時候,我就可以看到vscode自動幫我們計算好了對應的rem值,我們只要點擊使用就可以了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章