V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
feng32
V2EX  ›  程序员

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

  •  
  •   feng32 · 2016-11-29 22:06:29 +08:00 · 3739 次点击
    这是一个创建于 2901 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    12 条回复    2016-11-30 04:19:08 +08:00
    laobaozi
        1
    laobaozi  
       2016-11-29 22:27:51 +08:00
    你的宽度是怎么定的 或者 给个页面?
    可以在进度条跑完后 在进度条上加上提示 "点击查看日志"或者其他提示文字,然后做弹出层
    boro
        2
    boro  
       2016-11-29 22:31:31 +08:00 via iPhone
    写成响应式。
    feng32
        3
    feng32  
    OP
       2016-11-29 22:33:04 +08:00
    @laobaozi 关键问题不是弹出层的问题,而是下面那张图感觉比较难看,控件都挤在一个角落里
    feng32
        4
    feng32  
    OP
       2016-11-29 22:33:59 +08:00
    @feng32 浏览器宽度就定成最大化时的尺寸
    enenaaa
        5
    enenaaa  
       2016-11-29 22:35:44 +08:00
    居中, 像 V2EX 就是两边留白
    feng32
        6
    feng32  
    OP
       2016-11-29 22:39:11 +08:00
    @enenaaa 顶部导航栏和左侧导航栏为了统一不能动,因为已经有几十个页面使用这种布局了,其它部分是可以自由组织的,这样一般就没法居中了吧?
    laobaozi
        7
    laobaozi  
       2016-11-29 22:39:57 +08:00 via iPhone
    尝试写一个简单的 div 看看这个 div 在不同分辨率下的样式有什么不同 还有 切换分辨率之后可能要 reload ?
    enenaaa
        8
    enenaaa  
       2016-11-29 22:43:27 +08:00
    @feng32 那没办法。 最多用响应式布局, 根据屏幕拉长一点。
    JiaFeiX
        9
    JiaFeiX  
       2016-11-29 22:46:16 +08:00
    响应式
    xxxyyy
        10
    xxxyyy  
       2016-11-29 22:54:35 +08:00 via Android
    这要看页面结构了,如果结构好的,很容易调成居中的
    bdbai
        11
    bdbai  
       2016-11-29 23:41:14 +08:00 via Android
    可以用媒体查询来区分两种排版
    ericls
        12
    ericls  
       2016-11-30 04:19:08 +08:00
    flex
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2881 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 02:31 · PVG 10:31 · LAX 18:31 · JFK 21:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.