javascript H5自適應框架：adaptive

jopen 9年前發布 | 65K 次閱讀 adaptive 前端技術

H5端自適應框架

使用方法： 

<script src="js/adaptive.js"></script> 
<script> 
window['adaptive'].desinWidth = 640;// 設計圖寬度 
window['adaptive'].baseFont = 18;// 沒有縮放時的字體大小 
window['adaptive'].init();// 調用初始化方法 
</script>

然后在css中設置相應樣式即可： 

.main-info {
height: 0.88rem;
padding-bottom: 0.24rem;
}
.fund-info {
position: relative;
font-weight: normal;
padding: 0.2rem 0;
padding-right: 1.7rem;
padding-left: 0.23rem;
font-size: 0.32rem;
line-height: 1;
}

adaptivejs原理：

利用rem布局，根據公式  

html元素字體大小 = document根節點(html)寬度 * 100 / 設計圖寬度  

設置html元素的font-size,然后根據設計圖大小/100即為css大小。  
比如一個div設計圖寬度為89px,那么在css中我們可以這樣書寫：width:0.89rem;  
如果是文字，我們也建議使用rem。  

對于iphone的retina高清顯示屏，我們做了縮放處理，以達到最佳顯示效果。

注意：如果設計圖寬度大于document的寬度，0.01rem將小于1px,故如果設計圖是1px,在css中仍然用1px顯示。

可用的全局變量：window.devicePixelRatioValue 當前頁面設置的設備像素比

項目主頁：http://www.baiduhome.net/lib/view/home/1436252509473

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！