Day05-flexible.js

今天是來到新公司的第五天，開始看手中的項目，作的東西是相似網易一元購這樣的產品，有安卓ios平臺還有H5網站，總共三個渠道。首先代碼裏，頭部head引入的flexible.js。（ps：感受是什麼鬼，不曉得是幹嗎的。做爲一個工做快一年的半的前端小白，除了作過響應式頁面，還沒作過真正的移動H5頁面，表示很焦灼2333333。）ok，廢話很少說，let's get into the business。

好比今天接到一個ui妹子的一張設計圖，對於手機尺寸的各類規範我也不是很清楚。通常據我所知，寬通常是750px的。如何進行切片以及編寫css呢？具體詳情能夠訪問（http://www.jb51.net/article/7...，如下內容由此處轉載）。iphone6寬是375pt，因爲retina屏，因此切片和平時web端切片不太同樣。

解決retina屏問題的可行方案是（以750px*1334px的設計稿爲例）：

1）在devicePixelRatio<=2時，圖片統一使用750設計稿的切圖

2）在devicePixelRatio>=2時，圖片統一使用750*1.5=1125，也就是所謂@3x設計稿的切圖。

把美工按照750*1334的設計稿下的切圖都放在img/@2x 這個文件夾下。

而後讓美工把750的設計稿矢量放大1.5倍，再按照一樣的切圖要求提供@3x的切圖，並放在了img/@3x 這個文件夾下：

使用了這個js以後，就不要寫

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

交給flexible.js自動處理。

---

編寫CSS的基本要求：

1）除font-size外，其它大小都根據750標註稿的尺寸，轉換成rem單位的值，轉換方法爲：標註稿尺寸 / 標註稿基準字體大小；

2）標註稿基準字體大小 = 標註稿寬度 / 10，如標註稿寬爲750，標註稿基準字體大小爲75；標註稿寬爲640，標註稿基準字體大小爲64；（因此淘寶這個方案是能夠在任意設計稿尺寸下使用的）

3）若是須要設置font-size，可跟據html的data-dpr屬性來處理，相似下面的寫法：

[data-dpr="2"] p {   font-size: 16px; }  

[data-dpr="3"] p {   font-size: 24px; }