整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
前2篇文章講了《為什么375×667是移動(dòng)端原型設(shè)計(jì)的最佳分辨率如何設(shè)置手機(jī)APP原型尺寸
所謂的APP原型適配手機(jī)，是指用手機(jī)瀏打開(kāi)原型頁(yè)面的時(shí)候，橫豎都剛好撐滿(mǎn)屏幕。當(dāng)然如果頁(yè)面比較長(zhǎng)，高度超過(guò)一屏是沒(méi)問(wèn)題的。
比如你的原型是375×667，手機(jī)是iPhone6/6s/7，那在手機(jī)上查看的時(shí)候無(wú)需縮放，默認(rèn)撐滿(mǎn)屏幕。
如果你的原型是360×640，而手機(jī)是Android的小米4、小米note、華為p7、p8榮耀6、7這些主流機(jī)型，也是一樣的。
比如你的原型是375×667,而你的手機(jī)是華為p8，1080×1920。理論上來(lái)說(shuō)無(wú)法完美適配APP中所有的頁(yè)面。但是除了有下導(dǎo)航的頁(yè)面一般都沒(méi)問(wèn)題。
你需要在Axure生成HTML的時(shí)候設(shè)置一下手機(jī)上如何展示原型。
請(qǐng)勾選包含視口標(biāo)簽。瀏覽器顯示網(wǎng)頁(yè)，默認(rèn)是按照網(wǎng)頁(yè)自身分辨率來(lái)展示的。勾選了此項(xiàng)之后，里面的區(qū)域按照下方規(guī)則來(lái)處理展示。
寬，使用默認(rèn)的device-width即可。
高，一般不需要填，因?yàn)槭歉鶕?jù)寬度來(lái)決定的。
最小縮放倍數(shù)和最大縮放倍數(shù)，一般不需要填。
允許用戶(hù)縮放，一般填寫(xiě)no。
具體規(guī)則是原型頁(yè)面的橫向分辨率x初始縮放倍數(shù)xDPR參數(shù)=手機(jī)屏幕的橫向分辨率。得出這個(gè)值填到上圖中的對(duì)應(yīng)位置。
而這里的DPR參數(shù)(devicePixelRatio)，代表的是設(shè)備像素和CSS像素的比例，下方的chrome網(wǎng)頁(yè)調(diào)試中也揭示了這一點(diǎn)。
所以上面的華為p8應(yīng)該設(shè)置為0.96，你可以根據(jù)機(jī)型去百度搜索對(duì)應(yīng)的DPR參數(shù)是多少。
通過(guò)chrome-視圖-開(kāi)發(fā)者-開(kāi)發(fā)者工具，切換到你想看的手機(jī)尺寸。同時(shí)也可以用這個(gè)工具去了解在其他機(jī)型上面的效果，以方面了解是不是需要單獨(dú)適配。
當(dāng)然safari的菜單欄-開(kāi)發(fā)-響應(yīng)者模式也可以。
請(qǐng)用手機(jī)瀏覽器打開(kāi)該網(wǎng)頁(yè)，請(qǐng)用手機(jī)瀏覽器打開(kāi)該網(wǎng)頁(yè)，最好生成到桌面查看效果。比如我設(shè)計(jì)的原型。
建議豎向減掉20px，因?yàn)锳xure默認(rèn)不顯示頂部狀態(tài)欄。
建議你們下次設(shè)計(jì)APP原型的時(shí)候按照通用分辨率375×667來(lái)設(shè)置，次選方法是按照自己手機(jī)的邏輯分辨率來(lái)定尺寸。。
如果想明白為什么要這樣設(shè)置，可以去搜索viewport和邏輯分辨率等概念。當(dāng)然就使用而言，PM無(wú)需了解這些知識(shí)。
至于如何把原型放到手機(jī)上面查看，我們下次再講。
色模式最近風(fēng)頭正熱，大家都用上了嗎？本文作者從產(chǎn)品經(jīng)理的角度出發(fā)，對(duì)人們?yōu)槭裁聪矚g深色模式、深色模式適配現(xiàn)狀以及深色模式的搭配思路進(jìn)行了分析，與大家分享。
在 Android Q 之后，蘋(píng)果也在 iOS13 支持了深色模式，深色模式成了2019下半年的熱門(mén)話(huà)題，不少產(chǎn)品已經(jīng)完成了對(duì)深色模式的適配，淘寶、微信也先后開(kāi)始內(nèi)測(cè)，「變黑」似乎已經(jīng)成為趨勢(shì)。
而在適配深色模式之前，設(shè)計(jì)師需要深入了解它的特性，衡量適配深色模式帶來(lái)的價(jià)值，以及規(guī)劃合適的策略，避免陷入「為黑而黑」的泥潭。
影片放映時(shí)會(huì)關(guān)掉所有燈光，只有屏幕亮起吸引觀眾的注意力，同樣的原理下，當(dāng)產(chǎn)品界面是深色背景時(shí)，頁(yè)面元素優(yōu)先級(jí)更清晰，用戶(hù)更容易注意到關(guān)鍵內(nèi)容。而且相比淺色為主的界面，深色界面對(duì)眼睛的視覺(jué)壓力更小。
注：至于它的「護(hù)眼」作用還尚未明確，長(zhǎng)時(shí)間盯著屏幕造成的視覺(jué)疲勞依然不可避免。
看了太久千篇一律的「白底黑字」，深色模式讓用戶(hù)多了一種選擇。人人喜歡新鮮的樣式，哪怕只是短暫的熱情嘗試，都會(huì)增加用戶(hù)對(duì)產(chǎn)品的新鮮感，并且不可否認(rèn)的是，黑色更容易讓人感覺(jué)到酷炫新鮮。
OLED 屏幕中每個(gè)像素都是自主發(fā)光，在顯示深色元素時(shí)，消耗的電量更少，而在顯示純黑色時(shí)，像素點(diǎn)可以徹底關(guān)閉。打個(gè)不完全嚴(yán)謹(jǐn)?shù)谋确剑謾C(jī)屏幕就像是排列了幾萬(wàn)個(gè)小燈泡的大燈板，OLED 屏幕顯示黑色時(shí)會(huì)真的把那塊區(qū)域的燈泡關(guān)掉，自然會(huì)省電。
很多產(chǎn)品已經(jīng)存在夜間模式，開(kāi)啟夜間模式后界面同樣會(huì)轉(zhuǎn)向暗色，而突然被討論的「深色模式」和「夜間模式」有什么區(qū)別？
對(duì)于用戶(hù)而言顯然沒(méi)有必要分清楚夜間模式和深色模式的差別，在外觀上，它們真的很像。但是以設(shè)計(jì)師的角度來(lái)說(shuō)，只有真正區(qū)分它們之間的差別和應(yīng)用場(chǎng)景，才能提供給用戶(hù)一套邏輯清晰的選擇方案，讓用戶(hù)更方便快捷的選擇自己想要的模式。
開(kāi)啟夜間模式前后對(duì)比
淺色/深色模式下的界面對(duì)比
通過(guò)這兩張對(duì)比圖，可以明顯的感覺(jué)到夜間模式與深色模式下，界面元素的對(duì)比、層級(jí)表現(xiàn)都有所區(qū)別。夜間模式的設(shè)計(jì)目的，是讓用戶(hù)在夜間使用手機(jī)時(shí)，屏幕顯示更柔和，調(diào)整色溫、降低飽和度，而在白天開(kāi)啟夜間模式很難看清顯示內(nèi)容，并不適合在白天使用。
顯然，深色模式不是夜間模式，用戶(hù)可以在任何時(shí)間任何環(huán)境下使用它，需要維持和淺色模式同樣的產(chǎn)品特性，可以和設(shè)備的夜覽模式同時(shí)開(kāi)啟。
用戶(hù)將系統(tǒng)主題設(shè)置為深色后，自然就會(huì)期望所有的 app 都變成深色，深色模式逐漸會(huì)成為產(chǎn)品標(biāo)配的功能。已經(jīng)有越來(lái)越多的產(chǎn)品用各種方式對(duì)系統(tǒng)的深色模式進(jìn)行適配。主要分為以下三種類(lèi)型：
如果用戶(hù)的手機(jī)系統(tǒng)不支持深色模式，產(chǎn)品不會(huì)切換到深色模式。
代表產(chǎn)品有 微信讀書(shū)、豆瓣、懶飯、Instagram、愛(ài)奇藝
2. 原有夜間模式與深色模式進(jìn)行捆綁，讓用戶(hù)自行選擇是否配合系統(tǒng)主題切換
在不支持深色主題的系統(tǒng)內(nèi)用戶(hù)可以通過(guò)開(kāi)啟夜間模式，使產(chǎn)品主題變?yōu)樯钌?yán)格來(lái)說(shuō)，這并不是真正的深色模式，而出于不同的決策模型，產(chǎn)品團(tuán)隊(duì)會(huì)做出最適合自己的選擇。
代表產(chǎn)品：QQ、Twitter
代表產(chǎn)品：微信 淘寶
iOS & Android 兩套設(shè)計(jì)語(yǔ)言的 Dark Mode 策略除了在基礎(chǔ)色彩體系的數(shù)值有些差距外，更明顯的是在 Accent color 的不同處理方式。Android Q 則強(qiáng)調(diào)保障清晰觀看體驗(yàn)的前提下，要具備更多的靈活性，比如在原色彩上面加 40% 的白色透明遮罩，以增強(qiáng)在深色背景上的清晰對(duì)比度，缺點(diǎn)可能會(huì)讓原色彩在感官上發(fā)生較大的偏差。
——引自：釘釘 Dark Mode 設(shè)計(jì)
在 iOS 設(shè)計(jì)語(yǔ)言規(guī)范下，產(chǎn)品支持深色模式就必須管理兩套完整的顏色方案，確保它們之間始終保持同步，這就要求設(shè)計(jì)團(tuán)隊(duì)以更系統(tǒng)的方式來(lái)管理顏色體系。為此，蘋(píng)果引入了“語(yǔ)義化顏色”的概念。
注：語(yǔ)義化顏色是通過(guò)「用途」來(lái)對(duì)元素進(jìn)行定義描述，而不是具體的色值。「用途」定義下的顏色是動(dòng)態(tài)性，脫離于具體的表現(xiàn)樣式而獨(dú)立存在。比如，“背景色”，在深色模式中指代黑色，而在淺色模式中指代白色，這樣就可以讓顏色靈活的適應(yīng)淺色與深色模式切換。
具體應(yīng)用方法已有很多資料分享，本文不做擴(kuò)展。
Android 適配方案簡(jiǎn)單粗暴，對(duì)于顏色可參考梯梯度漸變模型規(guī)律配色，頁(yè)面背景根據(jù)層級(jí)疊加不同透明度的白色即可。但是完全執(zhí)行就容易導(dǎo)致產(chǎn)品在深色模式下產(chǎn)生風(fēng)格偏移，出現(xiàn)不符合品牌設(shè)計(jì)語(yǔ)言的情況。
在iOS 適配策略的基礎(chǔ)上，淘寶團(tuán)隊(duì)在分享中提出了「智能語(yǔ)義化」方案，使適配成本大幅降低。方案思路是：設(shè)計(jì)師根據(jù)不同UI元素的特性先期制定顏色語(yǔ)義化規(guī)則，技術(shù)在框架層面通過(guò)“顏色自動(dòng)反轉(zhuǎn)”技術(shù)實(shí)現(xiàn)顏色反轉(zhuǎn)。
然而除去基本顏色，大量的圖標(biāo)、插圖，動(dòng)效等等需要一一調(diào)整兼容，完美適配深色模式需要多方配合持續(xù)維護(hù)，而后期的功能開(kāi)發(fā)也需要同時(shí)兼顧兩種模式，對(duì)于自定義元素較多、業(yè)務(wù)組成復(fù)雜的 APP適配難度可想而知。
看完本文后，你可以了解深色模式受到追捧的原因，區(qū)分深色模式與夜間模式的不同，了解到適配深色模式的多種策略和面臨的挑戰(zhàn)，深入思考，當(dāng)前產(chǎn)品是否真的需要適配深色模式。最后，希望能夠幫你找到真正適合自己產(chǎn)品的適配策略。
作者：bubblegun；公眾號(hào)：@泡槍指北
本文由 @bubblegun 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
.開(kāi)發(fā)移動(dòng)端H5頁(yè)面
2.面對(duì)不同分辨率的手機(jī)
3.面對(duì)不同屏幕尺寸的手機(jī)
視覺(jué)稿
在前端開(kāi)發(fā)之前，視覺(jué)MM會(huì)給我們一個(gè)psd文件，稱(chēng)之為視覺(jué)稿。
對(duì)于移動(dòng)端開(kāi)發(fā)而言，為了做到頁(yè)面高清的效果，視覺(jué)稿的規(guī)范往往會(huì)遵循以下兩點(diǎn)：
首先，選取一款手機(jī)的屏幕寬高作為基準(zhǔn)(以前是iphone4的320×480，現(xiàn)在更多的是iphone6的375×667)。
對(duì)于retina屏幕(如: dpr=2)，為了達(dá)到高清效果，視覺(jué)稿的畫(huà)布大小會(huì)是基準(zhǔn)的2倍，也就是說(shuō)像素點(diǎn)個(gè)數(shù)是原來(lái)的4倍（對(duì)iphone6而言：原先的375×667，就會(huì)變成750×1334）。
問(wèn)題：
對(duì)于dpr=2的手機(jī)，為什么畫(huà)布大小×2，就可以解決高清問(wèn)題？
對(duì)于2倍大小的視覺(jué)稿，在具體的css編碼中如何還原每一個(gè)區(qū)塊的真實(shí)寬高(也就是布局問(wèn)題)?
帶著問(wèn)題，往下看...
一些概念
在進(jìn)行具體的分析之前，首先得知道下面這些關(guān)鍵性基本概念(術(shù)語(yǔ))。
物理像素(physical pixel)
一個(gè)物理像素是顯示器(手機(jī)屏幕)上最小的物理顯示單元，在操作系統(tǒng)的調(diào)度下，每一個(gè)設(shè)備像素都有自己的顏色值和亮度值。
設(shè)備獨(dú)立像素(density-independent pixel)
設(shè)備獨(dú)立像素(也叫密度無(wú)關(guān)像素)，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中得一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如: css像素)，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。
所以說(shuō)，物理像素和設(shè)備獨(dú)立像素之間存在著一定的對(duì)應(yīng)關(guān)系，這就是接下來(lái)要說(shuō)的設(shè)備像素比。
設(shè)備像素比(device pixel ratio )
設(shè)備像素比(簡(jiǎn)稱(chēng)dpr)定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系，它的值可以按如下的公式的得到：
設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素 // 在某一方向上，x方向或者y方向
在javascript中，可以通過(guò)window.devicePixelRatio獲取到當(dāng)前設(shè)備的dpr。
在css中，可以通過(guò)-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進(jìn)行媒體查詢(xún)，對(duì)不同dpr的設(shè)備，做一些樣式適配(這里只針對(duì)webkit內(nèi)核的瀏覽器和webview)。
綜合上面幾個(gè)概念，一起舉例說(shuō)明下：
以iphone6為例：
設(shè)備寬高為375×667，可以理解為設(shè)備獨(dú)立像素(或css像素)。
dpr為2，根據(jù)上面的計(jì)算公式，其物理像素就應(yīng)該×2，為750×1334。
用一張圖來(lái)表現(xiàn)，就是這樣(原諒我的盜圖)：
上圖中可以看出，對(duì)于這樣的css樣式：
width: 2px;height: 2px;
在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈現(xiàn)的大小(物理尺寸)是一致的，不同的是1個(gè)css像素所對(duì)應(yīng)的物理像素個(gè)數(shù)是不一致的。
在普通屏幕下，1個(gè)css像素 對(duì)應(yīng) 1個(gè)物理像素(1:1)。
在retina 屏幕下，1個(gè)css像素對(duì)應(yīng) 4個(gè)物理像素(1:4)。
位圖像素
一個(gè)位圖像素是柵格圖像(如：png, jpg, gif等)最小的數(shù)據(jù)單元。每一個(gè)位圖像素都包含著一些自身的顯示信息(如：顯示位置，顏色值，透明度等)。
談到這里，就得說(shuō)一下，retina下圖片的展示情況？
理論上，1個(gè)位圖像素對(duì)應(yīng)于1個(gè)物理像素，圖片才能得到完美清晰的展示。
在普通屏幕下是沒(méi)有問(wèn)題的，但是在retina屏幕下就會(huì)出現(xiàn)位圖像素點(diǎn)不夠，從而導(dǎo)致圖片模糊的情況。
用一張圖來(lái)表示：
如上圖：對(duì)于dpr=2的retina屏幕而言，1個(gè)位圖像素對(duì)應(yīng)于4個(gè)物理像素，由于單個(gè)位圖像素不可以再進(jìn)一步分割，所以只能就近取色，從而導(dǎo)致圖片模糊(注意上述的幾個(gè)顏色值)。
所以，對(duì)于圖片高清問(wèn)題，比較好的方案就是兩倍圖片(2x)。
如：200×300(css pixel)img標(biāo)簽，就需要提供400×600的圖片。
如此一來(lái)，位圖像素點(diǎn)個(gè)數(shù)就是原來(lái)的4倍，在retina屏幕下，位圖像素點(diǎn)個(gè)數(shù)就可以跟物理像素點(diǎn)個(gè)數(shù)形成 1 : 1的比例，圖片自然就清晰了(這也解釋了之前留下的一個(gè)問(wèn)題，為啥視覺(jué)稿的畫(huà)布大小要×2？)。
這里就還有另一個(gè)問(wèn)題，如果普通屏幕下，也用了兩倍圖片，會(huì)怎樣呢？
很明顯，在普通屏幕下，200×300(css pixel)img標(biāo)簽，所對(duì)應(yīng)的物理像素個(gè)數(shù)就是200×300個(gè)，而兩倍圖片的位圖像素個(gè)數(shù)則是200×300*4，所以就出現(xiàn)一個(gè)物理像素點(diǎn)對(duì)應(yīng)4個(gè)位圖像素點(diǎn)，所以它的取色也只能通過(guò)一定的算法(顯示結(jié)果就是一張只有原圖像素總數(shù)四分之一，我們稱(chēng)這個(gè)過(guò)程叫做downsampling)，肉眼看上去雖然圖片不會(huì)模糊，但是會(huì)覺(jué)得圖片缺少一些銳利度，或者是有點(diǎn)色差(但還是可以接受的)。
用一張圖片來(lái)表示：
針對(duì)上面的兩個(gè)問(wèn)題，我做了一個(gè)demo(內(nèi)網(wǎng)訪問(wèn))狂戳這里。
demo中，100×100的圖片，分別放在100×100，50×50，25×25的img容器中，在retina屏幕下的顯示效果。
條形圖，通過(guò)放大鏡其實(shí)可以看出邊界像素點(diǎn)取值的不同：
圖1，就近取色，色值介于紅白之間，偏淡，圖片看上去會(huì)模糊(可以理解為圖片拉伸)。
圖2，沒(méi)有就近取色，色值要么是紅，要么是白，圖片看上去很清晰。
圖3，就近取色，色值介于紅白之間，偏重，圖片看上去有色差，缺少銳利度(可以理解為圖片擠壓)。
愛(ài)字圖，可以通過(guò)看文字"愛(ài)"來(lái)區(qū)分圖片模糊還是清晰。
(ps：如果看上去不明顯，可以用手機(jī)掃碼網(wǎng)頁(yè)(內(nèi)網(wǎng)地址)或者點(diǎn)擊原圖看會(huì)更直觀點(diǎn)。
幾個(gè)問(wèn)題
這里說(shuō)一下，移動(dòng)端H5開(kāi)發(fā)，在不同分辨率，不同屏幕手機(jī)下會(huì)遇到的幾個(gè)經(jīng)典問(wèn)題。
retina下，圖片高清問(wèn)題
這個(gè)問(wèn)題上面已經(jīng)介紹過(guò)解決方案了：兩倍圖片(2x)，然后圖片容器縮小50%。
如：圖片大小，400×600;
1.img標(biāo)簽
width: 200px;height: 300px;
2.背景圖片
width: 200px;height: 300px;background-image: url(image@2x.jpg);background-size: 200px 300px; // 或者: background-size: contain;
這樣的缺點(diǎn)，很明顯，普通屏幕下：
同樣下載了2x的圖片，造成資源浪費(fèi)。
圖片由于downsampling，會(huì)失去了一些銳利度(或是色差)。
所以最好的解決辦法是：不同的dpr下，加載不同的尺寸的圖片。
不管是通過(guò)css媒體查詢(xún)，還是通過(guò)javascript條件判斷都是可以的。
那么問(wèn)題來(lái)了，這樣的話(huà)，不就是要準(zhǔn)備兩套圖片了嘛？(1x 和2x)
我想，做的好的公司，都會(huì)有這么一個(gè)圖片服務(wù)器，通過(guò)url獲取參數(shù)，然后可以控制圖片質(zhì)量，也可以將圖片裁剪成不同的尺寸。
所以我們只需上傳大圖(2x)，其余小圖都交給圖片服務(wù)器處理，我們只要負(fù)責(zé)拼接url即可。
如，這樣一張?jiān)瓐D：
https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg // 原圖
可以類(lèi)似這樣，進(jìn)行圖片裁剪：
// 200×200https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg_200x200.jpg// 100×100https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg_100x100.jpg
(ps: 當(dāng)然裁剪只是對(duì)原圖的等比裁剪，得保證圖片的清晰嘛~)
retina下，border: 1px問(wèn)題
這大概是設(shè)計(jì)師最敏感，最關(guān)心的問(wèn)題了。
首先得說(shuō)一下，為什么存在retina下，border: 1px這一說(shuō)？
我們正常的寫(xiě)css，像這樣border: 1px;，在retina屏幕下，會(huì)有什么問(wèn)題嗎？
先來(lái)，來(lái)看看下面的圖：
上面兩張圖分別是在iphone3gs(dpr=1)和iphone5(dpr=2)下面的測(cè)試效果，對(duì)比來(lái)看，對(duì)于1px的border的展示，它們是一致的，并無(wú)區(qū)別。
那么retina顯示屏的優(yōu)勢(shì)在哪里，設(shè)計(jì)師為何覺(jué)得高清屏下(右圖)這個(gè)線(xiàn)條粗呢？明明和左右一樣的~
還是通過(guò)一張圖來(lái)解釋(原諒我再次盜圖)：
上圖中，對(duì)于一條1px寬的直線(xiàn)，它們?cè)谄聊簧系奈锢沓叽?灰色區(qū)域)的確是相同的，不同的其實(shí)是屏幕上最小的物理顯示單元，即物理像素，所以對(duì)于一條直線(xiàn)，iphone5它能顯示的最小寬度其實(shí)是圖中的紅線(xiàn)圈出來(lái)的灰色區(qū)域，用css來(lái)表示，理論上說(shuō)是0.5px。
所以，設(shè)計(jì)師想要的retina下border: 1px;，其實(shí)就是1物理像素寬，對(duì)于css而言，可以認(rèn)為是border: 0.5px;，這是retina下(dpr=2)下能顯示的最小單位。
然而，無(wú)奈并不是所有手機(jī)瀏覽器都能識(shí)別border: 0.5px;，ios7以下，android等其他系統(tǒng)里，0.5px會(huì)被當(dāng)成為0px處理，那么如何實(shí)現(xiàn)這0.5px呢？
最簡(jiǎn)單的一個(gè)做法就是這樣(元素scale)：
.scale{ position: relative;}.scale:after{ content:""; position: absolute; bottom:0px; left:0px; right:0px; border-bottom:1px solid #ddd; -webkit-transform:scaleY(.5); -webkit-transform-origin:0 0;}
我們照常寫(xiě)border-bottom: 1px solid #ddd;，然后通過(guò)transform: scaleY(.5)縮小0.5倍來(lái)達(dá)到0.5px的效果，但是這樣hack實(shí)在是不夠通用(如：圓角等)，寫(xiě)起來(lái)也麻煩。
當(dāng)然還有其他好多hack方法，網(wǎng)上都可以搜索到，但是各有利弊，這里比較推薦的還是頁(yè)面scale的方案，是比較通用的，幾乎滿(mǎn)足所有場(chǎng)景。
對(duì)于iphone5(dpr=2)，添加如下的meta標(biāo)簽，設(shè)置viewport(scale 0.5)：
<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no">
這樣，頁(yè)面中的所有的border: 1px都將縮小0.5，從而達(dá)到border: 0.5px;的效果。
有人擔(dān)心頁(yè)面scale后會(huì)影響性能，@妙凈同學(xué)做過(guò)性能測(cè)試，見(jiàn)這里(內(nèi)網(wǎng)地址)。
看一下實(shí)現(xiàn)后的效果圖對(duì)比(右圖為優(yōu)化過(guò)的)：
(ps: 圖片被壓縮過(guò)，可能看上去并不明顯，可以用手機(jī)掃碼或者點(diǎn)擊這里(內(nèi)網(wǎng)地址)對(duì)比看看)
然而，頁(yè)面scale，必然會(huì)帶來(lái)一些問(wèn)題：
字體大小會(huì)被縮放
頁(yè)面布局會(huì)被縮放(如: div的寬高等)
這兩個(gè)問(wèn)題后面講到...
多屏適配布局問(wèn)題
移動(dòng)端布局，為了適配各種大屏手機(jī)，目前最好用的方案莫過(guò)于使用相對(duì)單位rem。
基于rem的原理，我們要做的就是: 針對(duì)不同手機(jī)屏幕尺寸和dpr動(dòng)態(tài)的改變根節(jié)點(diǎn)html的font-size大小(基準(zhǔn)值)。
這里我們提取了一個(gè)公式(rem表示基準(zhǔn)值)
rem = document.documentElement.clientWidth * dpr / 10
說(shuō)明：
乘以dpr，是因?yàn)轫?yè)面有可能為了實(shí)現(xiàn)1px border頁(yè)面會(huì)縮放(scale) 1/dpr 倍(如果沒(méi)有，dpr=1),。
除以10，是為了取整，方便計(jì)算(理論上可以是任何值)
所以就像下面這樣，html的font-size可能會(huì)：
iphone3gs: 320px / 10 = 32px
iphone4/5: 320px * 2 / 10 = 64px
iphone6: 375px * 2 / 10 = 75px
對(duì)于動(dòng)態(tài)改變根節(jié)點(diǎn)html的font-size，我們可以通過(guò)css做，也可以通過(guò)javascript做。
css方式，可以通過(guò)設(shè)備寬度來(lái)媒體查詢(xún)來(lái)改變html的font-size：
html{font-size: 32px;}//iphone 6 @media (min-device-width : 375px) { html{font-size: 64px;}}// iphone6 plus @media (min-device-width : 414px) { html{font-size: 75px;}}*/
缺點(diǎn)：通過(guò)設(shè)備寬度范圍區(qū)間這樣的媒體查詢(xún)來(lái)動(dòng)態(tài)改變r(jià)em基準(zhǔn)值，其實(shí)不夠精確，比如：寬度為360px 和 寬度為320px的手機(jī)，因?yàn)槠翆捲谕环秶鷧^(qū)間內(nèi)(<375px)，所以會(huì)被同等對(duì)待(rem基準(zhǔn)值相同)，而事實(shí)上他們的屏幕寬度并不相等，它們的布局也應(yīng)該有所不同。最終，結(jié)論就是：這樣的做法，沒(méi)有做到足夠的精確，但是夠用。
javascript方式，通過(guò)上面的公式，計(jì)算出基準(zhǔn)值rem，然后寫(xiě)入樣式，大概如下(代碼參考自kimi的m-base模塊)
var dpr, rem, scale;var docEl = document.documentElement;var fontEl = document.createElement('style');var metaEl = document.querySelector('meta[name="viewport"]');scale = 1 / dpr;dpr = win.devicePixelRatio || 1;rem = docEl.clientWidth * dpr / 10;// 設(shè)置viewport，進(jìn)行縮放，達(dá)到高清效果metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');// 設(shè)置data-dpr屬性，留作的css hack之用docEl.setAttribute('data-dpr', dpr);// 動(dòng)態(tài)寫(xiě)入樣式docEl.firstElementChild.appendChild(fontEl);fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';// 給js調(diào)用的，某一dpr下rem和px之間的轉(zhuǎn)換函數(shù)window.rem2px = function(v) {v = parseFloat(v);return v * rem;};window.px2rem: function(v) { v = parseFloat(v); return v / rem;};window.dpr = dpr;window.rem = rem;
這種方式，可以精確地算出不同屏幕所應(yīng)有的rem基準(zhǔn)值，缺點(diǎn)就是要加載這么一段js代碼，但個(gè)人覺(jué)得是這是目前最好的方案了。
因?yàn)檫@個(gè)方案同時(shí)解決了三個(gè)問(wèn)題：
border: 1px問(wèn)題
圖片高清問(wèn)題
屏幕適配布局問(wèn)題
說(shuō)到布局，自然就得回答一下最初的留下的那個(gè)問(wèn)題：如何在css編碼中還原視覺(jué)稿的真實(shí)寬高？
前提條件：
拿到的是一個(gè)針對(duì)iphone6的高清視覺(jué)稿 750×1334
采用上述的高清方案(js代碼)。
如果有一個(gè)區(qū)塊，在psd文件中量出：寬高750×300px的div，那么如何轉(zhuǎn)換成rem單位呢？
公式如下：
rem = px / 基準(zhǔn)值;
對(duì)于一個(gè)iphone6的視覺(jué)稿，它的基準(zhǔn)值就是75(之前有提到);
所以，在確定了視覺(jué)稿(即確定了基準(zhǔn)值)后，通常我們會(huì)用less寫(xiě)一個(gè)mixin，像這樣：
// 例如: .px2rem(height, 80);.px2rem(@name, @px){ @{name}: @px / 75 * 1rem;}
所以，對(duì)于寬高750×300px的div，我們用less就這樣寫(xiě)：
.px2rem(width, 750);.px2rem(height, 300);
轉(zhuǎn)換成html，就是這樣：
width: 10rem; // -> 750pxheight: 4rem; // -> 300px
最后因?yàn)閐pr為2，頁(yè)面scale了0.5，所以在手機(jī)屏幕上顯示的真實(shí)寬高應(yīng)該是375×150px，就剛剛好。
倘若頁(yè)面并沒(méi)有scale 0.5，我們的代碼就得這樣：
.px2rem(width, 375);.px2rem(height, 150);
這樣的寬高，我們往往是這樣得來(lái)的：
將750×1334的視覺(jué)稿轉(zhuǎn)成375×667的大小后，再去量這個(gè)區(qū)塊的大小(感覺(jué)好傻)。
在750×1334量得區(qū)塊寬高是750×300px后，再口算除以2(感覺(jué)好麻煩)。
最后給出一張沒(méi)有布局適配(上圖)和用rem布局適配(下圖)的對(duì)比圖：
(上面的手機(jī)分別是：iphone3gs, iphone5, iphone6)
很明顯可以看出，rem適配的各個(gè)區(qū)塊的寬高都會(huì)隨著手機(jī)屏寬而改變，最最明顯的可以看一下圖片列表那部分，最后一張圖視覺(jué)稿要求只出現(xiàn)一點(diǎn)點(diǎn)，rem布局在任何屏幕下都顯示的很好。
字體大小問(wèn)題
既然上面的方案會(huì)使得頁(yè)面縮放(scale)，對(duì)于頁(yè)面區(qū)塊的寬高，我們可以依賴(lài)高清視覺(jué)稿，因?yàn)橐曈X(jué)稿本來(lái)就×2了，我們直接量就可以了，那么對(duì)于字體該如何處理呢？
對(duì)于字體縮放問(wèn)題，設(shè)計(jì)師原本的要求是這樣的：任何手機(jī)屏幕上字體大小都要統(tǒng)一，所以我們針對(duì)不同的分辨率(dpr不同)，會(huì)做如下處理：
font-size: 16px;[data-dpr="2"] input { font-size: 32px;}
(注意，字體不可以用rem，誤差太大了，且不能滿(mǎn)足任何屏幕下字體大小相同)
為了方便，我們也會(huì)用less寫(xiě)一個(gè)mixin：
.px2px(@name, @px){ @{name}: round(@px / 2) * 1px; [data-dpr="2"] & { @{name}: @px * 1px; } // for mx3 [data-dpr="2.5"] & { @{name}: round(@px * 2.5 / 2) * 1px; } // for 小米note [data-dpr="2.75"] & { @{name}: round(@px * 2.75 / 2) * 1px; } [data-dpr="3"] & { @{name}: round(@px / 2 * 3) * 1px } // for 三星note4 [data-dpr="4"] & { @{name}: @px * 2px; }}
(注意：html的data-dpr屬性就是之前js方案里面有提到的，這里就有用處了)
根據(jù)經(jīng)驗(yàn)和測(cè)試，還是會(huì)出現(xiàn)這些奇奇葩葩的dpr，這里做了統(tǒng)一兼容~
用的時(shí)候，就像這樣：
.px2px(font-size, 32);
當(dāng)然對(duì)于其他css屬性，如果也要求不同dpr下都保持一致的話(huà)，也可以這樣操作，如：
.px2px(padding, 20);.px2px(right, 8);
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
