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