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

Question

前辈好，我一直以来都对PC端，手机端的页面，还有设计稿如何处理等等等等问题都没彻底弄才明白。。今天想把一直以来的疑问提出来，希望前辈多多指教 = =

首先是PC端的问题

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

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

3.问题来了，比如我按照设计稿100 X 100的宽高写了，但是到RET屏幕的话是会缩小2倍或者3倍的(请问我这样说对吗???),
那是不是说我要写两套CSS，通过JS判断当前设备是不是ret显示器( 这样说对吗？)来加载不同的css文件？？？

移动端的

1.请问现在的移动端的设计稿是不是一般是640，或者750的

2.比如说现在是640的设计稿，请问是不是所有的宽高切下来全部要除于2，而且还要是偶数的，请问字体要怎么处理呢？？

3.苹果那个2倍3倍的，是不是也跟PC一样？就是说直接放大2,3倍，切，然后又判断是不是RT？？

4.我觉得我问的越来越乱，实在是搞不懂啊，针对移动端，我现在只会用阿里的flexible.js来写，因为使用很简单，设计稿直接切，多少就多少，全部用rem，字体另外处理，但是我对它的原理完全搞不懂。。。

5.关于PC，移动都适配的
最后是我现在才想到的，以前用bootstrap写过一些练习页面，页面好像全部都写PX的，请问用bootstrap的话就不用处理这么多吗？？？

问题有点多，可能还很脑残，希望前辈见谅，望指导！

Answer 1

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

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

既然你写过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其实都是屏幕这个设备本身提供的。所以只需要写一种就足够了，当然如果逻辑像素不同，你需要适配的话，这个就涉及到响应式布局了。

Answer 2

你多尝试就知道了，你说的设计稿的几个尺寸，都是可以的了，只要别比你说的小。移动端640、750，pc端1920的直接切都没问题，实际上r屏、2K屏，对网页来说都没有任何变化，获取一下window宽高你就知道为什么了。我们公司主要做移动端，750的设计稿，有时候为了减小体积，都会转成更低的才切。有人说这样对高分辨率的屏幕太不友善了，但是实际上，浏览器并没有让网页用上高分辨率屏幕，而且高分辨率的手机和低分辨率的手机，用的是一样的网络，虽说4G快，但是地铁、电梯等常用手机的场所的网络还是很有问题。

对了，设计给的psd，如果你放大了，马赛克就出来了，你要放大的话，叫他们放大。

如果你做的项目不要求在极端场景下能使用，倒是可以切大图，效果还是有的。

Answer 3

我这边移动端的做法
设计750的图，向上向下兼容，只用这一套图，除非特殊要求。

目的是较少的工作量去服务较多的用户，很少见的手机分辨率不再考虑范围之内。

精益求精的移动端适配还是可以针对性的多做几套图标