body自适应属性设置 | 类型 | 特点 | 适应类型 | 开发时注意事项 |
自适应布局 | 双向自适应 | 添加在 body 中的所有组件会铺满整个 body。新增或删除组件后,body 内的其他组件重新铺满 body。如果修改某个组件的大小,相邻组件的大小也会发生变化,大小变化表现为此消彼长。 | 报表双向充满浏览器窗口,内容全部呈现在一页; 此种方式适用于框架简洁,内容需要固定在一个屏幕中显示,不允许向下拖动的驾驶舱或大屏看板。 注:当设置有「冻结行」时,行高被限制,双向自适应则不生效,等同于「横向自适应或不自适应」。 双向自适应:决策报表在 Web 端预览时根据浏览器窗体大小自适应充满区域展示,双向都不会出现滚动条。 | 1、body 自适应布局下,为实现和绝对布局下一样组件可以随意放置的效果,可以在 body 中添加一个绝对画布块,效果等同于 body 绝对布局。 2、开启自适应后预览报表时,浏览器端报表的呈现效果和屏幕分辨率有一定的关联。 body 大小表示的是画布真实大小,当 body 大小和屏幕分辨率大小一致时,模板预览时会显示真实大小,不会缩放;当 body 大小和屏幕分辨率大小不一致时,会以屏幕分辨率和 body 大小的比例产生缩放。同一模板,在低分辨率电脑下预览时缩放比例更大,所以适合高分辨率屏幕下的报表在低分辨率屏幕下预览时,会比较容易出现滚动条。 3、用户在设计报表时,若报表最终需要在多种不同的分辨率电脑下预览,推荐在低分辨率电脑上做模板,需要开启字体自适应,模板完成后,在高分辨率电脑上测试预览时,如果有细微不适应问题,微调一下即可 |
横向自适应 | 报表横向充满浏览器窗口,纵向高度按一定比例缩放,内容过多时,单页不能显示全,纵向出现滚动条,拖动显示剩余内容; 此种流式布局方式,适用于内容丰富,表格数据较多,无法固定在一个屏幕中,需要滚动的大屏报表,也适合移动端报表。 横向自适应:决策报表在 Web 端预览时按 body 初始宽高比调整大小,以横向调整为主,横向始终不出现滚动条。 | |||
绝对布局 | 适应区域 | 允许组件随意放置,只要组件在 body 中即可,所有组件不会铺满整个 body。组件可以重叠,改变一个组件的大小,其他组件的大小不会受影响。 | 报表双向充满浏览器窗口,内容全部呈现在一页; 此种方式适用于内容丰富,一个小主题内既要图表又要文字,组件小且多,body平铺空间不足,需要组件重叠才能实现的驾驶舱或大屏看板。 决策报表在 Web 端预览时,根据浏览器窗体大小进行调整,自适应充满区域展示。 | 1、决策报表 body 选择「绝对布局」时,显示 body 的宽高度,body 宽高度即决策报表设计区域的大小,是由报表大小和 FineReport 设计器所在电脑的分辨率计算得到的,用户无法修改 |
固定大小 | 报表不根据浏览器窗口大小进行调整,按照设计模板时 form 的大小原样展示在浏览器窗口; 此种方式适用于明确知道显示窗口大小的驾驶舱或大屏看板,也适用于需要固定显示在浏览器窗口的左上方,不需要铺满整个页面的报表。 决策报表在 Web 端预览时,不根据浏览器窗体大小进行调整,双向都有可能出现滚动条。 |
body及像素比例
以电脑分辨率为1920*1080为例
电脑分辨率 | body尺寸 | body像素 | 比例(尺寸/像素) | ||
宽 | 高 | 宽 | 高 | ||
1920*1080 | 1152(默认) | 648(默认) | 960(默认) | 540(默认) | 1.2 |
1920*1080 | 1920 | 1080 | 1600 | 900 | 1.2 |
1920*1080 | 1536 | 1024 | 1280 | 853.33 | 1.2 |
1920*1080 | 1500 | 1000 | 1250 | 833.33 | 1.2 |
1920*1080 | 1366 | 768 | 1138.33 | 640 | 1.2 |