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

[feng32]

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

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

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

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

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

[laobaozi]

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

[boro]

写成响应式。

[feng32]

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

[feng32]

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

[enenaaa]

居中， 像 V2EX 就是两边留白

[feng32]

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

[laobaozi]

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

[enenaaa]

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

[JiaFeiX]

响应式

[xxxyyy]

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

[bdbai]

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

[ericls]

flex