本申请涉及一种浏览器自动适配的网页布局方法和装置,所述方法包括:通过层叠样式表为初始元素设置弹性属性,得到具有所述弹性属性的弹性元素;根据所述弹性元素和所述弹性属性进行浏览器渲染,确定每个弹性元素的目标样式以及在浏览器中的尺寸、位置;根据所述弹性元素的目标样式以及在浏览器中的尺寸、位置,进行网页布局。本申请提高浏览器页面布局效率。
背景技术
目前网页设置主要包括以下三种布局方式。1.固定布局(Fixed Layout):网页元素的宽度和高度都被固定,不随浏览器窗口的大小变化而变化,这种布局方式适用于固定宽度的网页,但不适用于响应式布局。2.流式布局(Fluid Layout):页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变,这就导致如果屏幕太大或者太小都会导致元素无法正常显示。3.自适应布局(Adaptive Layout):以屏幕尺寸为依据,划分多个预设的布局尺寸,采用媒体查询技术随浏览器窗口大小切换适合的布局,能够适应不同设备的屏幕尺寸,但需要设计多个不同尺寸的预设布局,增加了代码的复杂度,性能比较低。
目前主流采用的网页布局方式为自适应布局,以适应不同设备的屏幕尺寸和窗口大小。但是,这种响应式设计有其局限性,往往需要使用媒体查询或JavaScript脚本来控制元素的尺寸和位置,增加了代码的复杂度,浏览器页面布局效率低下。
实现思路