PC 端网页不同分辨率下的排版问题求助

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 3486 days ago, the information mentioned may be changed or developed.

如图，在页面上有两个两个 Radio Button 选择模式，一个开始按钮，一个进度条。下面是编辑参数用的组件，一个 Grid(Table)，还有两个 FieldSet (GroupBox)

在 1366x768 的笔记本电脑上，看起来还行，把左边的表格再拉长一点的话，正好可以占据整个页面宽度：

但是一旦外接显示器，分辨率调到 1920x1080 就不行了，这种情况下编辑部分只占屏幕的一半宽度，强制拉长的话，也会感觉很奇怪：

在进度条走到 100% 后，实际上还需要一个文本框用来显示所有的日志，这个文本框可以占一整屏，但是目前我还没有想到一个方案，可以兼容这两种常见的分辨率

请问在这种情况下，有什么常见的设计策略吗？

12 replies • 2016-11-30 04:19:08 +08:00

laobaozi

Nov 29, 2016

你的宽度是怎么定的或者给个页面?
可以在进度条跑完后在进度条上加上提示 "点击查看日志"或者其他提示文字,然后做弹出层

boro

Nov 29, 2016 via iPhone

写成响应式。

feng32

Nov 29, 2016

@laobaozi 关键问题不是弹出层的问题，而是下面那张图感觉比较难看，控件都挤在一个角落里

feng32

Nov 29, 2016

@feng32 浏览器宽度就定成最大化时的尺寸

enenaaa

Nov 29, 2016

居中，像 V2EX 就是两边留白

feng32

Nov 29, 2016

@enenaaa 顶部导航栏和左侧导航栏为了统一不能动，因为已经有几十个页面使用这种布局了，其它部分是可以自由组织的，这样一般就没法居中了吧？

laobaozi

Nov 29, 2016 via iPhone

尝试写一个简单的 div 看看这个 div 在不同分辨率下的样式有什么不同还有切换分辨率之后可能要 reload ？

enenaaa

Nov 29, 2016

@feng32 那没办法。最多用响应式布局，根据屏幕拉长一点。

JiaFeiX

Nov 29, 2016

响应式

xxxyyy

Nov 29, 2016 via Android

这要看页面结构了，如果结构好的，很容易调成居中的

bdbai

Nov 29, 2016 via Android

可以用媒体查询来区分两种排版

ericls

Nov 30, 2016

flex