移動端不同分辨率適配--使用flexible


根據阿里手淘團隊發布的可伸縮布局方案amfe-flexible,git地址:https://github.com/amfe/lib-flexible。

使用方法:

lib-flexible庫的使用方法非常的簡單,只需要在Web頁面的<head></head>中添加對應的flexible_css.js,flexible.js文件

第一種方法是將文件下載到你的項目中,然后通過相對路徑添加:

<script src="build/flexible_css.debug.js"></script>
<script src="build/flexible.debug.js"></script>

或者直接加載阿里CDN的文件:

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

 

容器或組件寬高主要使用單位 rem ,字體大小則不變仍然使用單位 px

示例地址:https://github.com/amfe/article/issues/17

還有一個約束是,如果針對iphone5 640*1136,因此我們限制最外層包裹的div最大寬度為 640px,表示10rem;

把視覺稿中的px轉換成rem的換算方法:要轉換的像素值 / 640px * 10

 


免責聲明!

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



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