資訊專欄INFORMATION COLUMN
摘要：今天是來到新公司的第五天，開始看手中的項目，做的東西是類似網易一元購這樣的產品，有安卓平臺還有網站，總共三個渠道。解決屏問題的可行方案是以的設計稿為例在時，圖片統(tǒng)一使用設計稿的切圖在時，圖片統(tǒng)一使用，也就是所謂設計稿的切圖。
今天是來到新公司的第五天，開始看手中的項目，做的東西是類似網易一元購這樣的產品，有安卓ios平臺還有H5網站，總共三個渠道。首先代碼里，頭部head引入的flexible.js。（ps：感覺是什么鬼，不曉得是干嘛的。作為一個工作快一年的半的前端小白，除了做過響應式頁面，還沒做過真正的移動H5頁面，表示很焦灼2333333。）ok，廢話不多說，let"s get into the business。
比如今天接到一個ui妹子的一張設計圖，對于手機尺寸的各種規(guī)范我也不是很清楚。一般據我所知，寬一般是750px的。如何進行切片以及編寫css呢？具體詳情可以訪問（http://www.jb51.net/article/7...，以下內容由此處轉載）。iphone6寬是375pt，由于retina屏，所以切片和平時web端切片不太一樣。
解決retina屏問題的可行方案是（以750px*1334px的設計稿為例）：
1）在devicePixelRatio<=2時，圖片統(tǒng)一使用750設計稿的切圖
2）在devicePixelRatio>=2時，圖片統(tǒng)一使用750*1.5=1125，也就是所謂@3x設計稿的切圖。
把美工按照750*1334的設計稿下的切圖都放在img/@2x 這個文件夾下。
然后讓美工把750的設計稿矢量放大1.5倍，再按照同樣的切圖要求提供@3x的切圖，并放在了img/@3x 這個文件夾下：
使用了這個js之后，就不要寫
交給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; }
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/50225.html
摘要：今天是來到新公司的第五天，開始看手中的項目，做的東西是類似網易一元購這樣的產品，有安卓平臺還有網站，總共三個渠道。解決屏問題的可行方案是以的設計稿為例在時，圖片統(tǒng)一使用設計稿的切圖在時，圖片統(tǒng)一使用，也就是所謂設計稿的切圖。 今天是來到新公司的第五天，開始看手中的項目，做的東西是類似網易一元購這樣的產品，有安卓ios平臺還有H5網站，總共三個渠道。首先代碼里，頭部head引入的flex...
摘要：加入我們，一起挑戰(zhàn)吧掃碼申請加入全棧部落 JavaScript 30 - 一起做一次了不起的挑戰(zhàn) (Node+Vue+微信公眾號開發(fā))企業(yè)級產品全棧開發(fā)速成周末班首期班(10.28號正式開班，歡迎搶座) 在Github上看到了wesbos的一個Javascript30天挑戰(zhàn)的repo，旨在使用純JS來進行練習，不允許使用任何其他的庫和框架，該挑戰(zhàn)共30天，我會在這里復現(xiàn)這30天遇到的挑...
摘要：更新今天又發(fā)現(xiàn)了一種簡單的方法可以直接對年月日時分秒進行操作，假如今天那么所得昨天為昨天的時間前天的時間其中，函數(shù)為擴展函數(shù)。 1、時間格式化 1 //昨天的時間 2 var day1 = new Date(); 3 day1.setTime(day1.getTime()-24*60*60*1000); 4 var s1 = day1.getFullYear()+- + (da...
閱讀 2016·2021-11-23 09:51
閱讀 1270·2019-08-30 15:55
閱讀 1645·2019-08-30 15:44
閱讀 786·2019-08-30 14:11
閱讀 1176·2019-08-30 14:10
閱讀 946·2019-08-30 13:52
閱讀 2659·2019-08-30 12:50
閱讀 650·2019-08-29 15:04
