淺談flexible.js--移動端自適應方案
阿新 • • 發佈:2022-04-10
github地址:https://github.com/amfe/lib-flexible
官方文件地址:https://github.com/amfe/article/issues/17
1.什麼是flexible.js?
flexible.js是手淘開發出的一個用來適配移動端的js框架。手淘框架的核心原理就是根據制不同的width給網頁中html根節點設定不同的font-size,然後所有的px都用rem來代替,這樣就實現了不同大小的螢幕都適應相同的樣式了。其實它就是一個終端裝置適配的解決方案,也就是說它可以讓你在不同的終端裝置中實現頁面適配。
2.如何使用flexible.js呢?
1.首先我們在GitHub上下載它的壓縮包:github.com/amfe/lib-fl…
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值,我們只要點選使用就可以了。
CSSrem -- -vscode外掛
————————————————
版權宣告:本文為CSDN博主「Angus安格斯.」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處連結及本宣告。
原文連結:https://blog.csdn.net/weixin_44803046/article/details/106380088