注册
web

设计呀,你是真会给前端找事呀!!!

背景



  • 设计:我想要的你听明白了吗,你做出来的和我想要的差距很大,你怎么没有一点审美(你个臭男人,你怎么不按我画的做)!
  • :啊?这样自适应不是很好吗,适配了大部分机型呀,而且不会有啥显示的兼容性,避免不必要的客户咨询和客户投诉。
  • 设计: 你上一家公司就是因为有你这样的优秀员工才倒闭的吧?!
  • :啊?ntm和产品是一家的是吗?


dc09a56740cb1735ad9117c7f336c248.jpg

我该如何应对


先看我实现的


b0nh2-9h1qy.gif


在看看设计想要的


9e2b0572-aff4-4644-9eeb-33a9ea76265c.gif
总结一下:



  • 1.一个的时候宽度固定,不管屏幕多大都占屏幕的一半。
  • 2.俩个的时候,各占屏幕的一半,当屏幕过小的时候两个并排展示换行。
  • 3.三个的时候,上面俩,下面一个,且宽度要一样。
  • 4.大于三个的时候,以此类推。


有句话叫做什么,乍一看很合理,细想一下,这不是扯淡么。



所以我又和设计进行了亲切的对话



  • :两个的时候你能考虑到小屏的问题,那一个和三个的时候你为啥不考虑,难道你脑袋有泡,在想一个和三个的时候泡刚好堵住了?
  • 设计: 你天天屌不拉几的,我就要这样,这样好看,你懂个毛的设计,你知道什么是美感和人体工学设计,视觉效果拉满吗?
  • :啊?我的姑奶奶耶,你是不是和产品一个学校毕业的,咋就一根筋呢?
  • 产品:ui说的对,我听ui的。汪汪汪(🐶)

当时那个画面就像是,就像是:



1a38426434ac01e315202a0c2f48e39e.jpg

而我就像是
1b761c13b4439463a77ac8abf563677d.png


那咋办,写呗,我能咋办?



我月黑风夜,
黑衣傍我身,
潜入尔等房,
打你小屁屁?



代码实现


   class={[
'group-even-number' : this.evenNumber,
'group-odd-number' : this.oddNumber,
'themeSelectBtnBg'
]}
value={this.currentValue}
onInput={(value: any) => {
this.click(value)
}}
>
...


   .themeSelectBtnBg {
display: flex;
&:nth-child(2n - 1) {
margin-left: 0;
margin-right: 10px;
}
&:nth-child(2n) {
margin-left: 0;
margin-right: 0;
}

}
// 奇数的情况,宽度动态计算,将元素挤下去
.group-odd-number {
// 需要减去padding的宽度
width: calc(50% - 7.5px);
}

.group-even-number {
justify-content: space-between;
@media screen and (max-width:360px) {
justify-content: unset;
margin-right: unset;
flex: 1;
flex-wrap: wrap;
}
}

行吧,咱就这样吧



8167199e881952dd2bf73efd6098cbed.jpg

作者:顾昂_
来源:juejin.cn/post/7304268647101939731

0 个评论

要回复文章请先登录注册