資訊專欄INFORMATION COLUMN
摘要：今天是來到新公司的第五天，開始看手中的項(xiàng)目，做的東西是類似網(wǎng)易一元購這樣的產(chǎn)品，有安卓平臺還有網(wǎng)站，總共三個(gè)渠道。解決屏問題的可行方案是以的設(shè)計(jì)稿為例在時(shí)，圖片統(tǒng)一使用設(shè)計(jì)稿的切圖在時(shí)，圖片統(tǒng)一使用，也就是所謂設(shè)計(jì)稿的切圖。
今天是來到新公司的第五天，開始看手中的項(xiàng)目，做的東西是類似網(wǎng)易一元購這樣的產(chǎn)品，有安卓ios平臺還有H5網(wǎng)站，總共三個(gè)渠道。首先代碼里，頭部head引入的flexible.js。（ps：感覺是什么鬼，不曉得是干嘛的。作為一個(gè)工作快一年的半的前端小白，除了做過響應(yīng)式頁面，還沒做過真正的移動(dòng)H5頁面，表示很焦灼2333333。）ok，廢話不多說，let"s get into the business。
比如今天接到一個(gè)ui妹子的一張?jiān)O(shè)計(jì)圖，對于手機(jī)尺寸的各種規(guī)范我也不是很清楚。一般據(jù)我所知，寬一般是750px的。如何進(jìn)行切片以及編寫css呢？具體詳情可以訪問（http://www.jb51.net/article/7...，以下內(nèi)容由此處轉(zhuǎn)載）。iphone6寬是375pt，由于retina屏，所以切片和平時(shí)web端切片不太一樣。
解決retina屏問題的可行方案是（以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屬性來處理，類似下面的寫法：
[data-dpr="2"] p { font-size: 16px; }
[data-dpr="3"] p { font-size: 24px; }
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115332.html
摘要：今天是來到新公司的第五天，開始看手中的項(xiàng)目，做的東西是類似網(wǎng)易一元購這樣的產(chǎn)品，有安卓平臺還有網(wǎng)站，總共三個(gè)渠道。解決屏問題的可行方案是以的設(shè)計(jì)稿為例在時(shí)，圖片統(tǒng)一使用設(shè)計(jì)稿的切圖在時(shí)，圖片統(tǒng)一使用，也就是所謂設(shè)計(jì)稿的切圖。 今天是來到新公司的第五天，開始看手中的項(xiàng)目，做的東西是類似網(wǎng)易一元購這樣的產(chǎn)品，有安卓ios平臺還有H5網(wǎng)站，總共三個(gè)渠道。首先代碼里，頭部head引入的flex...
摘要：加入我們，一起挑戰(zhàn)吧掃碼申請加入全棧部落 JavaScript 30 - 一起做一次了不起的挑戰(zhàn) (Node+Vue+微信公眾號開發(fā))企業(yè)級產(chǎn)品全棧開發(fā)速成周末班首期班(10.28號正式開班，歡迎搶座) 在Github上看到了wesbos的一個(gè)Javascript30天挑戰(zhàn)的repo，旨在使用純JS來進(jìn)行練習(xí)，不允許使用任何其他的庫和框架，該挑戰(zhàn)共30天，我會在這里復(fù)現(xiàn)這30天遇到的挑...
摘要：更新今天又發(fā)現(xiàn)了一種簡單的方法可以直接對年月日時(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...
閱讀 3171·2021-11-19 09:40
閱讀 3663·2021-11-16 11:52
閱讀 2988·2021-11-11 16:55
閱讀 3186·2019-08-30 15:55
閱讀 1191·2019-08-30 13:08
閱讀 1663·2019-08-29 17:03
閱讀 3020·2019-08-29 16:19
閱讀 2587·2019-08-29 13:43
