資訊專欄INFORMATION COLUMN
摘要：今天是來到新公司的第五天，開始看手中的項目，做的東西是類似網易一元購這樣的產品，有安卓平臺還有網站，總共三個渠道。解決屏問題的可行方案是以的設計稿為例在時，圖片統一使用設計稿的切圖在時，圖片統一使用，也就是所謂設計稿的切圖。
今天是來到新公司的第五天，開始看手中的項目，做的東西是類似網易一元購這樣的產品，有安卓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之后，就不要寫
交給flexible.js自動處理。
編寫CSS的基本要求：
1）除font-size外，其它大小都根據750標注稿的尺寸，轉換成rem單位的值，轉換方法為：標注稿尺寸 / 標注稿基準字體大?。?/p>
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; }
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50225.html
摘要：今天是來到新公司的第五天，開始看手中的項目，做的東西是類似網易一元購這樣的產品，有安卓平臺還有網站，總共三個渠道。解決屏問題的可行方案是以的設計稿為例在時，圖片統一使用設計稿的切圖在時，圖片統一使用，也就是所謂設計稿的切圖。 今天是來到新公司的第五天，開始看手中的項目，做的東西是類似網易一元購這樣的產品，有安卓ios平臺還有H5網站，總共三個渠道。首先代碼里，頭部head引入的flex...
摘要：加入我們，一起挑戰吧掃碼申請加入全棧部落 JavaScript 30 - 一起做一次了不起的挑戰 (Node+Vue+微信公眾號開發)企業級產品全棧開發速成周末班首期班(10.28號正式開班，歡迎搶座) 在Github上看到了wesbos的一個Javascript30天挑戰的repo，旨在使用純JS來進行練習，不允許使用任何其他的庫和框架，該挑戰共30天，我會在這里復現這30天遇到的挑...
摘要：更新今天又發現了一種簡單的方法可以直接對年月日時分秒進行操作，假如今天那么所得昨天為昨天的時間前天的時間其中，函數為擴展函數。 1、時間格式化 1 //昨天的時間 2 var day1 = new Date(); 3 day1.setTime(day1.getTime()-24*60*60*1000); 4 var s1 = day1.getFullYear()+- + (da...
閱讀 1917·2021-11-23 09:51
閱讀 1246·2019-08-30 15:55
閱讀 1613·2019-08-30 15:44
閱讀 759·2019-08-30 14:11
閱讀 1146·2019-08-30 14:10
閱讀 916·2019-08-30 13:52
閱讀 2630·2019-08-30 12:50
閱讀 615·2019-08-29 15:04
