淺談flexible.js--移動端自適應方案


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


免責聲明!

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



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