javascript - 拿到美工/UI的PSD图，接下来写前端页面的顺序，求指导-PHP中文网问答

拿到手的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元素差这么多（距离什么的），前端就我一个人，美工也不懂前端，知乎不敢发帖，回答里面动不动就是几百行文字，吓死人。大家支支招啊。

<script> function setRemFontSize() { var remSize = window.innerWidth / 7.5; document.querySelector("html").style.fontSize = (remSize > 100 ? 100 : remSize) + "px"; } setRemFontSize(); window.addEventListener("resize", function () { setTimeout(function () { setRemFontSize(); }, 200) }); </script>

全部回复(6)

阿神2017-05-16 13:23:54 6楼

可以看一下这篇文章

赞 +0

添加回复

过去多啦不再A梦2017-05-16 13:23:54 5楼

这段代码放到你html文件头部用来监听窗口变化然后标注如果是750px
写成7.5rem

淡淡烟草味2017-05-16 13:23:54 4楼

刚好最近在写一个手机端单页应用，我也是在学习中。建议学习一下一些css预处理的方法比如stylus，然后就可以相当于定义一个方法比如说
我的图片是 XXXX@2x.png, XXXX@3x.png 这两个分别是对应不同dpi的手机
然后我就定义了一个方法：

bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")

然后每次需要使用的时候

p{
    bg-image:url('xxxx')
}

然后经过打包工具编译之后就会针对不同dpi的手机显示不同的图片。
可能说的不太清楚。。因为我也是初学stylus

另外关于调试的话，可以尝试微信web开发者工具

高洛峰2017-05-16 13:23:54 3楼

需要相应不同分辨率的页面，设计图给你标注出了具体像素，这件事有点太匪夷所思了，美工肯定不懂前端。

对于移动端的布局，个人经验来讲，
1、宽度建议多用百分比
2、高度高度要么自动撑开，要么百分比
3、关于字体大小，我看主流推荐还是rem但我更喜欢vw，用vw根本不需要再做media的分辨率判断了。vw有人说对一些老款手机兼容性不好，根据我的实际测试，目前不兼容vw的在我的实际测试中，比例几乎可以忽略。

滿天的星座2017-05-16 13:23:54 2楼

宽度百分比和固定尺寸视情况而定使用，box-sizing：border-box 很管用。
字体用媒体查询或者rem，我个人基本是在用媒体查询，因为同时需要适配pc。
移动端适配以iphone6尺寸为准，其他的保证显示不出问题就行。适当可以使用transform来缩放某些元素。
0像素偏差没必要，只要能达到显示的效果就行。页面是面向用户的，不是面向美工的。

过去多啦不再A梦2017-05-16 13:23:54 1楼

基本都都iphone6为基准。iphone 4上能显示就行了。视图差不多就ok. 本来电脑上视图和手机上就有差别。包括设计稿和实际文字的长短都有区别的