前端在拿到UI的设计图是1920*1080的，效果是全屏的，如何来开发

Question

按照设计上的图来使用，上面的切图内容按固定px写的。比如一个元素距离顶部480px高，因为开发时导航栏有高度，那么我这个元素距离顶部应该写多高呢？

Answer 1

实际的 web 项目中，如果需要“像素级还原”设计稿的话，那必须要求设计师也能做到“像素级考虑”排版需求，然而这样的设计师可能不存在。
通常的解决方案是：在一个方向上只部分区域有固定尺寸，而其他区域则使用伸缩或者滚动条的方式来自动适应外框的尺寸。比如思否页面宽度够的时候，在横向上，中间的 1200px 宽的内容区域有固定尺寸，两边留白会自动伸缩填满剩下的区域（“伸缩”只是在视觉上，实际上剩下的区域就是单纯的留空）；在纵向上，导航栏高度固定，内容区域通过滚动来囊括所有的内容。
所以你根本不必去做“尺寸上的还原”，而应该做“视觉上的还原”，我们的视觉通常不会以实际坐标为参考，只会以看得见的东西为参考。那个距离顶部 480px 的东西不应该以顶部为参考，而应该以对它的排版有直接影响的某个元素为参考。比如它是在一个方框里，就以这个方框的上边缘为参考；如果导航栏对它有影响，就以导航栏的底部为参考——不过这时候通常要把这个相对距离换算成相对于页面顶部的距离。

Answer 2

1. 如果产品要求是全屏的，那么 UI 设计没问题，你应该检测当前是否全屏状态，如果不是全屏状态，则要求用户全屏后使用
2. 如果产品没有要求全屏，那么 UI 设计就不应该是全屏方案，也就没有所谓离屏幕顶部 480px 高的问题了

另外给个建议：
如果是全屏，但客户的屏幕超过 1920 x 1080 或者比例不是 16:9 那么实际按 1920 x 1080做，
最后计算缩放尺寸，transform 或者 zoom 缩放到合适尺寸，省很多事噢

Answer 3

拿到1920的设计稿，一般先看字体，如果正文字体普遍在16px、20px以上，那就说明设计稿有问题，说明UI是拿着1920的设计稿在1440的电脑屏幕上设计的，设计出来的成品在1440上看着美好，但是如果在1920甚至更大的屏幕上，字体、图片等会非常非常大。

想看1920设计稿的真实效果，那就得到1920的屏幕上是去看效果。

如果出现了字体特别大的情况，这时候就要跟UI去科普，不同屏幕大小的PC端网站，并不能简单以为是放大缩小，而是布局的变化。比如图片大屏幕是5列，小屏幕是3列。

但是再大的屏幕，字体不可能等比变大，这个可以去对比一些其他网站。

对页面效果要求比较高的话，最好是 1920 1440 1080 这几个主要尺寸都设计一份设计稿。

如果UI不专业，不想改图，你就把设计稿缩小成1440进行开发。再慢慢适配