1.设计图
在此只是给出前端目前流行的解决方案，并不涉及专业的UI知识，如有错误，欢迎指正。
1.1 flexible布局
手机布局目前很多网页遵循手淘的flexible布局，简而言之就是网页的视图随着屏幕的比例放大缩小，可以参考如下链接
放在大屏幕下（实际这类网页只适应手机屏幕，在此只是拿出来当个例子）：
1.2 UI设计的时候怎么参考这类网页
上面的知识UI可以了解下，当然，这不是重点，兼容是前端的事。下面的才是重点！！
1.2.1 设计图比例
手淘设计师常选择iPhone6作为基准设计尺寸，交付给前端的设计尺寸是按750px * 1334px为准(高度会随着内容多少而改变)。
建议 UI设计图参考上述比例，但也可以不必遵循，可根据你们的手机做参考。（比如你的手机分辨率如果是1080 1920，那么你的设计图也可参考你的手机为1080px1920px）。
1.2.2 如何参考
实际上手机的显示跟电脑上是有区别的，
如何在ps里参考网上网页中设计元素（字体图像）的大小，
我的一个建议是拿出你们的==手机截屏==，==要把网页充满手机全屏再截图==，然后放到电脑上在ps里面去测量。
比如，你的手机是i6（i7，i8），那么你的设计图比例就做成750px*1334px（高度不定），你所需要填充的字体元素，图像元素，行高，图标大小，可以参考网上一些网站的设计。形成自己的一套标准。检查的时候也可以把设计图传给手机全屏看看效果怎么样。
如果你的手机是i6p( 7p 8p),那么你的设计图比例就做成1080px*1920px（高度不定），你所需要填充的字体元素，图像元素，行高，图标大小，可以参考网上一些网站的设计。形成自己的一套标准。检查的时候也可以把设计图传给手机全屏看看效果怎么样。
如果需要测试机也行，找珊姐借i6。
另外一种方式是通过浏览器的调试窗口来测量，不过这种方式需要转化计算，在此就不演示了，如果需要可以找我。
1.3 关于字体的题外话
实际上，在ps里的字体大小跟在网页上显示是不一样的，具体情况可以看下我这个提问。
所以，之前UI设计的时候，在图片上标明的字体大小，前端需要精准还原的时候不会只参考设计图上的标注。
另外，UI设计的时候，选择什么字体可以参考网上一些网站的风格。
1 | 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif |
额，这是我第一次做分享，也是我个人的经验之谈，如果有问题，欢迎与我探讨，谢谢！–泽鑫