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

時間 2019-11-10

原文原文鏈接

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

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

第一種方法是將文件下載到你的項目中，而後經過相對路徑添加:github

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

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

<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;flex

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

相關標籤/搜索