HelloGitHub-Team / geese

采用 Next.js 构建的开源爱好者社区。An open-source enthusiast community built with Next.js.
https://hellogithub.com
Apache License 2.0
282 stars 66 forks source link

自适应优化 #65

Closed 521xueweihan closed 1 year ago

521xueweihan commented 1 year ago

优先级 : Header > 广告组件 > 下拉框

大宽屏

1. 宽屏 header 没有等比拉伸,logo 应该多出内容一些 2. 右边栏的广告组件,图片展示不完整

截屏2022-10-09 09 28 53

3. 宽屏下月刊的目录太宽了

image

小窄屏幕

1. header 上的搜索框没有自动伸缩,需保证 左下拉框的和头像的完整

image

2. 项目详情右侧 score、评论按钮 顶出屏幕了

image image

3. 排行榜,中间 logo 部分伸缩(文字部分可以省略),保证两个下拉框的正常展示

截屏2022-10-10 11 16 17

下来选项的内容不用换行

image
521xueweihan commented 1 year ago

认领那个 bug 可以在这里留言,防止做重哈。

cqh963852 commented 1 year ago

自适应通常是小屏幕设计优先。先有小屏幕的设计-> 中 -> 大。且小屏优先实现。遵循这个规则,通常不需要特殊开发。

RJM1996 commented 1 year ago

200多的屏幕宽度是不是太极端了,一般没有手机屏幕这么窄吧

521xueweihan commented 1 year ago

@RJM1996 是的,200 过于极端了。 尽量兼容一 270 左右吧,我看有个用户用老款 iphone 应该是 270 左右,展示有问题。

521xueweihan commented 1 year ago

@521xueweihan 已修复:

  1. 大宽屏 2:右边栏的广告组件,图片展示不完整
  2. 大宽屏 3:宽屏下月刊的目录太宽了
  3. 窄屏 2:项目详情右侧 score、评论按钮 顶出屏幕了

已提交到 i65-自适应优化 分支:https://github.com/HelloGitHub-Team/geese/tree/i65-%E8%87%AA%E9%80%82%E5%BA%94%E4%BC%98%E5%8C%96

github-actions[bot] commented 1 year ago

Branch i65-自适应优化 created!

RJM1996 commented 1 year ago

认领那个 bug 可以在这里留言,防止做重哈。

已修复:

  1. 大宽屏 1

    image
  2. 窄屏 1、3

    image

已提交到 i65-自适应优化 分支