UDE对我说:精心调的间距,你们压根不调,终究是错付了
UDE对我说:精心调的间距,你们压根不调,终究是错付了
事情是这个样得,一天我再写样式得时候发现我调整了模块间距、高度、文字大小等都是参照UI设计,写到最后发现跟UI得整体高度对不上(正常对不上可能也就那个样了,但是他左侧有个表格,表头是64px 表列是52px,
584 = 52 * 10 + 64
)。
我就问说我们得UI说 :
我说:这个咋对不上?发了个截图(我把写好的界面我觉得没啥问题,模块间距,字体大小等都是按照设计来的)
UI说:你这些间距不对! 文字行高加了吗?
我说:啥文字行高啊?
UI说:line-height设置了吗?
我说:可以了高度对齐了,这个属性竟然是调正文本的间距的。。。 我真不知道。。
我说:对不起是我不专业了,工作5年了竟然不知道。 我知道得是这个属性是这么用的height: 20px; line-height: 20px;
这样可以使文字Y轴居中。但是我发现他有的时候会对的不是很齐,我后来对齐文本就使用flex
弹性盒子布局了。
UI说: 啊,你不知道吗,我都知道!交点学费吧,跟我学前端。这个就是调整文字行高的,文字一般都有行高,不是紧贴着边。
我说:。。。。。。
UI说:我突然想到,你之前不用line-height
,那你段落文字的间距用什么属性调呢?
我说: 之前很少遇到多行文本展示得。。都是不调 没注意过。
UI说: 我们精心调的间距,你们压根不调,终究是错付了
我说:遇到得多行文本少 没注意过。
UI说:单行的也一样啊,行高不一样,看着间距就不一样
我说:我是写固定容器高度啊 然后flex
居中。
UI说:那这个固定高度你会根据设计图来吗?
我说: 那肯定啊
UI说: 原来我们在乎的,你们压根不看,尴尬!
UI说:我看国际版首页,多行文字也都是没有间距,可能很多前端不注意这个,压根就不写间距,所以出来就很丑,感觉文字全部在一块了。
我说: 那就是了。。。
反思&&总结
其实个人来说我对代码、体验以及UI还原度还是比较认真的(处女座),会对自己严格要求尽量100%
还原设计。这家公司是TOB
行业,TOB
虽然没有TOC
业务会强要求UI
还原度高,但是我还是会高一直要求自己,写的界面也都得到了领导、产品经理的认可,也有些产品经理说主动要求我去负责他的本次迭代功能开发。
CSS的line-height属性用于设置行高,指定行内元素之间的垂直间距,这个以后一定得注意下了。相对于pc
端,现在一些UI组件得应用相对来说写的样式很少了。相比较我自己js
能力要比css
能力强,感觉写数据处理、算法更有意思。
如果你也有相同问题也要及时改正啊,line-height
很总要!!!
转载自:https://juejin.cn/post/7251576409570164797