android psd切图,请问前辈，前端根据PSD设计稿切图究竟要怎么处理，我一直都没搞懂。。。...

之前写过的关于图片的选取的。

既然你写过ios的，那么你首先要知道为什么你需要不同的切图？

不同的切图是为了在不同分辨率的设备上，表现出最好的效果，最简单的例子就是，100300的图片，放到300900的容器中，就会出现马赛克。当100300的图片，放到50150的容器中，也会模糊，因为显然多了很多的像素点。

然后你需要明白什么是逻辑像素

逻辑像素就是设备告诉浏览器，我的宽是多少，高是多少

什么是物理像素

物理像素就是你的手机分辨率是1920*1080，那么这个就是物理像素

物理像素和逻辑像素的联系？

我对Android比较熟悉，就拿Android来讲一下。

android中是有计算公式的： 分辨率为1920 *1080的手机，屏幕为5英寸。。。

那么计算公式就是 sqrt(19201920+10801080) /5 /160 约等于3 ,这个称作scale，其实也就是物理像素缩小scale倍变为逻辑像素。

这里算出来物理像素就是 1080 / 3 = 360 。所以你会发现你写的H5，其实360px就可以撑满屏幕的宽度。

有了这些概念就可以考虑你的问题了。

1.请问现在PC端的设计稿是不是一般都是1920宽的？？

如果你的设计只想适配1920宽的电脑，那么久只有1920的设计稿，如果设计想要适配多种的，那么我至少认为设计应该懂Grid，也就是响应式布局，针对不同宽度，而又不同表现。

2.请问如果要适配苹果那个retina显示器的话，是不是把当前的PSD文件直接放大2倍或者3倍??我只知道移动端的IOS是2倍或者3倍，PC端的我不清楚。。，然后一样切。

对于图片来说，retina的图片分辨率应该是设计提供给你的，如果你需要去为了retina屏显示的图片更加好看，那么你需要多套图片。否则一种足矣。和Ios的两倍三倍原理一致。

3.问题来了，比如我按照设计稿100 X 100的宽高写了，但是到RET屏幕的话是会缩小2倍或者3倍的(请问我这样说对吗???),

那是不是说我要写两套CSS，通过JS判断当前设备是不是ret显示器( 这样说对吗？)来加载不同的css文件？？？

这个就需要上面的概念了。我们写代码的时候哦，只需要关注逻辑像素。retina屏，举个例子，mac pro,28801440，普通屏幕，1440720，那么这两个屏幕要写两套css？肯定不是。

对于retina屏幕，逻辑像素是2880 / 4 = 720 ,普通屏幕，1440 / 2 = 720，其实是一样的。那么为什么retina屏幕要除以4，而普通屏幕只要除以2，这个其实就是个规范，屏幕设计的规范，retina屏的4和普通屏的2其实都是屏幕这个设备本身提供的。所以只需要写一种就足够了，当然如果逻辑像素不同，你需要适配的话，这个就涉及到响应式布局了。