javascript - 拿到美工/UI的PSD图，接下来写前端页面的顺序，求指导
问题描述
拿到手的psd是750*1334分辨率，这应该是iphone6的分辨率，那么，此时是不是我的chrome模拟器就要设置成iphone6了?如果是的话，那么
《问题1》来了。我的电脑分辨率是1366*768，chrome模拟iphone6的话会缩放，影响做网页效果，我一般设置成iphone5，这样的话能够不缩放显示手机端页面，字体也就不会因为缩放模糊。那么如果设置成iphone5来做iphone6的psd，肯定无法做到完全一样（图标大小肯定要比psd的小一点）。后来，
《问题2》我设置了不同分辨率下的html的font-size不一样，所有涉及到长度宽度行高这些css都用rem单位，不采用px和em，但是这样的话，也只能在各个分辨率的手机端下勉强凑活，根本无法完全和psd一样。于是，我又纠结了。
《问题3》，美工给的iphone的psd，有的页面上会标注元素长度px，有的没有，那我就很奇怪，我是否应该把chrome模拟器设置成iphone6然后和psd做到像素级的0偏差？至于iphone5和iphone6plus分辨率下的页面我该用@media来分别写吗？那太累了！！以前PC端倒是可以0像素偏差，可是手机端感觉力不从心啊！
《问题4》有时候收到的PSD里面的有5个文件夹比如drawable-xxhdpi，其实就是不同分辨率下icon，我一般是用的最大的文件夹里面的icon，那么，这是偷懒么？是不是应该适配不同分辨率的手机并且@media使用不同大小的icon，这样的话，我不是更加吃不消么？
--------------------------------分割线-------------------------------------
其实，说了这么久，还是自己完全不知道怎么制作手机端页面，大家是怎么制作的啊，有没有什么教程什么的啊，我是否真的需要适配所有分辨率下的手机页面？我适配了iphone5下的页面大致一样，结果美工会说iphone6plus下怎么和psd元素差这么多（距离什么的），前端就我一个人，美工也不懂前端，知乎不敢发帖，回答里面动不动就是几百行文字，吓死人。大家支支招啊。
其一：你说的iphone6会缩放，是指chrome调成手机模式调试的时候，iphone6的底部排版看不到吗？如果是的话，可以将那个100%缩小到75%，就可以整体显示了，也不会看不清字体。如图：
其二：做移动端布局的话，建议使用flexible.js，可以自行百度一下，这是手淘的插件，网上会有很多比较详细的解释，直接引入这个js，布局的时候rem一般是参照75px设置就可以，字体是根据data-dpr设置的，通常是需要设置三个，一个是为1的时候，一个是为2的时候，一个是为3的时候，所以移动端字体大小尽量保持一致，你使用的标签最好也保持一致，工作量会小很多。
其三:个人认为没必要0像素差，因为工作量的确很大，只要每个界面保持的距离范围视觉上一样就可以，所以你的距离等也都需要rem布局，误差也不会太大。
其四：我自己习惯是用最大的那个，如果你不嫌麻烦或者公司有需要，你可以每个都图标都media一下，如果没需求的话，直接选用最大的吧，大屏幕上也会清晰显示的。
移动端布局可能会遇到很多的适配问题，而且chrome的调试不一定准确，电脑显示正常，手机上也可能有其他问题，不过基本百度或者google都可以找到答案，祝你布局顺利。
这篇关于javascript - 拿到美工/UI的PSD图，接下来写前端页面的顺序，求指导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
