https://segmentfault.com/a/11...

之前寫(xiě)過(guò)的關(guān)于圖片的選取的。

既然你寫(xiě)過(guò)ios的，那么你首先要知道為什么你需要不同的切圖？

不同的切圖是為了在不同分辨率的設(shè)備上，表現(xiàn)出最好的效果，最簡(jiǎn)單的例子就是，100300的圖片，放到300900的容器中，就會(huì)出現(xiàn)馬賽克。當(dāng)100300的圖片，放到50150的容器中，也會(huì)模糊，因?yàn)轱@然多了很多的像素點(diǎn)。

然后你需要明白什么是邏輯像素

邏輯像素就是設(shè)備告訴瀏覽器，我的寬是多少，高是多少

什么是物理像素

物理像素就是你的手機(jī)分辨率是1920*1080，那么這個(gè)就是物理像素

物理像素和邏輯像素的聯(lián)系？

我對(duì)Android比較熟悉，就拿Android來(lái)講一下。

android中是有計(jì)算公式的： 分辨率為1920 *1080的手機(jī)，屏幕為5英寸。。。

那么計(jì)算公式就是 sqrt(19201920+10801080) /5 /160 約等于3 ,這個(gè)稱作scale，其實(shí)也就是物理像素縮小scale倍變?yōu)檫壿嬒袼亍?/p>

這里算出來(lái)物理像素就是 1080 / 3 = 360 。所以你會(huì)發(fā)現(xiàn)你寫(xiě)的H5，其實(shí)360px就可以撐滿屏幕的寬度。

有了這些概念就可以考慮你的問(wèn)題了。

1.請(qǐng)問(wèn)現(xiàn)在PC端的設(shè)計(jì)稿是不是一般都是1920寬的？？

如果你的設(shè)計(jì)只想適配1920寬的電腦，那么久只有1920的設(shè)計(jì)稿，如果設(shè)計(jì)想要適配多種的，那么我至少認(rèn)為設(shè)計(jì)應(yīng)該懂Grid，也就是響應(yīng)式布局，針對(duì)不同寬度，而又不同表現(xiàn)。

2.請(qǐng)問(wèn)如果要適配蘋(píng)果那個(gè)retina顯示器的話，是不是把當(dāng)前的PSD文件直接放大2倍或者3倍??我只知道移動(dòng)端的IOS是2倍或者3倍，PC端的我不清楚。。，然后一樣切。

對(duì)于圖片來(lái)說(shuō)，retina的圖片分辨率應(yīng)該是設(shè)計(jì)提供給你的，如果你需要去為了retina屏顯示的圖片更加好看，那么你需要多套圖片。否則一種足矣。和Ios的兩倍三倍原理一致。

3.問(wèn)題來(lái)了，比如我按照設(shè)計(jì)稿100 X 100的寬高寫(xiě)了，但是到RET屏幕的話是會(huì)縮小2倍或者3倍的(請(qǐng)問(wèn)我這樣說(shuō)對(duì)嗎???),
那是不是說(shuō)我要寫(xiě)兩套CSS，通過(guò)JS判斷當(dāng)前設(shè)備是不是ret顯示器( 這樣說(shuō)對(duì)嗎？)來(lái)加載不同的css文件？？？

這個(gè)就需要上面的概念了。我們寫(xiě)代碼的時(shí)候哦，只需要關(guān)注邏輯像素。retina屏，舉個(gè)例子，mac pro,28801440，普通屏幕，1440720，那么這兩個(gè)屏幕要寫(xiě)兩套css？肯定不是。
對(duì)于retina屏幕，邏輯像素是2880 / 4 = 720 ,普通屏幕，1440 / 2 = 720，其實(shí)是一樣的。那么為什么retina屏幕要除以4，而普通屏幕只要除以2，這個(gè)其實(shí)就是個(gè)規(guī)范，屏幕設(shè)計(jì)的規(guī)范，retina屏的4和普通屏的2其實(shí)都是屏幕這個(gè)設(shè)備本身提供的。所以只需要寫(xiě)一種就足夠了，當(dāng)然如果邏輯像素不同，你需要適配的話，這個(gè)就涉及到響應(yīng)式布局了。

你多嘗試就知道了，你說(shuō)的設(shè)計(jì)稿的幾個(gè)尺寸，都是可以的了，只要?jiǎng)e比你說(shuō)的小。移動(dòng)端640、750，pc端1920的直接切都沒(méi)問(wèn)題，實(shí)際上r屏、2K屏，對(duì)網(wǎng)頁(yè)來(lái)說(shuō)都沒(méi)有任何變化，獲取一下window寬高你就知道為什么了。我們公司主要做移動(dòng)端，750的設(shè)計(jì)稿，有時(shí)候?yàn)榱藴p小體積，都會(huì)轉(zhuǎn)成更低的才切。有人說(shuō)這樣對(duì)高分辨率的屏幕太不友善了，但是實(shí)際上，瀏覽器并沒(méi)有讓網(wǎng)頁(yè)用上高分辨率屏幕，而且高分辨率的手機(jī)和低分辨率的手機(jī)，用的是一樣的網(wǎng)絡(luò)，雖說(shuō)4G快，但是地鐵、電梯等常用手機(jī)的場(chǎng)所的網(wǎng)絡(luò)還是很有問(wèn)題。

對(duì)了，設(shè)計(jì)給的psd，如果你放大了，馬賽克就出來(lái)了，你要放大的話，叫他們放大。

如果你做的項(xiàng)目不要求在極端場(chǎng)景下能使用，倒是可以切大圖，效果還是有的。

我這邊移動(dòng)端的做法
設(shè)計(jì)750的圖，向上向下兼容，只用這一套圖，除非特殊要求。

目的是較少的工作量去服務(wù)較多的用戶，很少見(jiàn)的手機(jī)分辨率不再考慮范圍之內(nèi)。

精益求精的移動(dòng)端適配還是可以針對(duì)性的多做幾套圖標(biāo)