找回密码
 立即注册

QQ登录

只需一步,快速开始

Joe.xu 讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2022-10-26 14:26  /   查看:3793  /  回复:0
本帖最后由 Joe.xu 于 2022-10-27 10:49 编辑

市面上形形色色的大屏幕层出不穷,那作为页面设置者的我们必然要站在第五层,通通给支持了。
现在一般我们推荐使用流式布局来让页面自适应屏幕,可以参考这个教程

看完必恍然大悟的活字格内幕:五十、流式布局的正确打开方式
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=92533&fromuid=60953
(出处: 葡萄城产品技术社区)


在流式布局出现之前,活字格也有页面拉伸来处理这类问题,据了解有些格友现在也还在使用,
活字格的拉伸模式主要有以下五种
无拉伸:页面在浏览器中不会进行拉伸,与在设计器中保持一致。
水平拉伸:页面在不同浏览器中随着浏览器尺寸进行水平方向上的拉伸。
垂直拉伸:页面在不同浏览器中随着浏览器尺寸进行垂直方向上的拉伸。
双向拉伸:页面在不同浏览器中随着浏览器尺寸进行水平和垂直方向上的拉伸,使得在充满不同分辨率的浏览器时都具有较好的视觉效果。
等比拉伸(填满宽度):页面将填满浏览器的宽度,再等比对高度进行拉伸。

针对这几种拉伸的使用,其实也有些许的性能差异,一般来说页面越复杂差异越明显,
接下来我们分别用使用最广泛的无拉伸,双向拉伸,等比拉伸做个测试,

每个页面都有同样的四个表格
(1)无拉伸3.443s)

image.png918486938.png

(2)双向拉伸(3.655s)

image.png647360839.png

(3)等比拉伸(5.272s)

image.png406386718.png

(4)流式布局(3.578s)

image.png467597045.png

综合来看,双向拉伸、流式布局、无拉伸基本无差异,等比拉伸在页面渲染时耗时长,性能会差一些。

  
拉伸模式
  
无拉伸
双向拉伸
等比拉伸
流式布局
耗时(s/秒)
3.443
3.655
5.272
3.578
基于以上结果,推荐大家在有需要的时候尽量使用流式布局,减少等比拉伸的使用。

页面拉伸的使用.fgcc (1.08 MB, 下载次数: 438)

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部