前端拿到UI给的蓝湖设计稿，该如何开始写？

Question

因为之前一直写的后台系统的简单业务，这次改别的项目的UI，需要自己写css还有一些布局，还涉及到大屏，有用到echarts,所以有一些问题想请教下大家：

问题1: 设计稿是1920*1080的，我画页面的时候，宽高怎么去写呢，比如一些很细节的宽200px，边距40px,我要去写固定值么，但这样在我笔记本上看着元素就很大·· 不太知道怎么去布局写

问题2:echarts我之前没写过，刚刚看了下文档，很多参数需要配置，UI给的图有一些很细节的间距，或者大小，要怎么去处理呢？有没有经验或者注意事项可以给我参考一下呢

其他暂时还没想到，自己对样式这块太菜了，就是很难受哇

Answer 1

1.布局可以考虑rem或者百分比。可参考下面的文章

• 基于等比缩放的大屏自适应方案

2.echart给你几个参考网站，找到一个合适的自己微调一下
https://www.makeapie.cn/echarts
http://echarts.zhangmuchen.top/#/index

Answer 2

问题1: 对于宽高，因为有很多的屏幕尺寸，一般都是响应式的，就是你需要确定哪部分是固定宽度，哪部分是自适应的(可以使用 flex 布局)， 这个需要和产品沟通一下

问题2： Echart 有很多配置项可以调整样式，可以尽量和 UI 一致，如果真做不到可以和产品沟通一下，有些效果其实不和设计保持一致也可以满足需求。

Answer 3

问题1:
看场景,如果需要兼容多种屏幕,可能只需要版心居中.
如果需要响应式,这需要用rpx等解决方案.
数据大屏可能需要针对不同屏幕采用不同布局,或者只适配指定的屏幕.
关于布局可能性比较多,就算你把效果图发出来,有可能大家想的和设计想的不一样你还得重写.

问题2:
echarts入门很简单,可以自定义的地方非常多(所以官方文档特别长),但是不一定是需要100%还原设计图的,只要该表达的内容都表达出来,看起来几乎一样就行了,不必扣像素.

设计图只是做参考,几乎不可能100%还原出来.特别是某些设计喜欢用苹果平方和weight=500的中等加粗.你只需要把你能实现的实现出来,不能实现的和设计说无法实现就行了(前提是你真的知道无法实现).按自己想法改设计图不推荐,99%的可能设计会向你甩锅