Page adaptation method and device, computer equipment and storage medium

Abstract

The invention provides a page adaptation method and device, computer equipment and a storage medium. The method comprises the steps that the current window size of a display page, the original size of the page and the first word size of a root element in the page are obtained; the width change ratio and the height change ratio are calculated according to the current window size and the page original size, the current window size comprising the window width and the window height, and the page original size comprising the page width and the page height; and an element scaling ratio is determined based on the width change ratio and the height change ratio, and a second word size of the root element is obtained according to the element scaling ratio and the first word size of the root element. According to the method, the elements in the page can be automatically zoomed according to the change of the first word size of the root element to adapt to electronic equipment with different screen resolutions, and the first word size of the root element is timely adjusted according to the change of the current window size, so that the sizes of all the elements in the page are adjusted.

Description

technical field [0001] The present application relates to the field of computer technology, and in particular to a page adaptation method, device, computer equipment and storage medium. Background technique [0002] With the development of technology, there are more and more electronic devices of various types, and the screen resolutions on different electronic devices are also different. The browser in the electronic device needs to parse and render the files in the web server into a visual page, so in order to adapt the page to electronic devices with different screen resolutions, front-end engineers often need to develop corresponding , so that the content of the page can be displayed completely and clearly. [0003] With the modularization and engineering of front-end technology, various corresponding frameworks and solutions have gradually matured, including Vue, React and other frameworks that provide componentization capabilities and scaffolding projects, improving m...

AI Technical Summary

Problems solved by technology

Grid layout is an adaptive layout consisting of grid containers and grid items, which can automatically scale the size of the container according to different screen resolutions. However, for historical projects, the original code needs to be modified and the intrusion High reliability, and will increase the additional workload, with a certain transformation cost

Media queries can obtain the window size of the current page and apply the corresponding style sheet according to the current window size, so as to automatically adapt the page content under different resolutions, but this method requires adding additional JavaScript during page development Code, if you need to adapt more electronic devices with different screen resolutions, front-end engineers need to add corresponding JavaScript codes for different electronic devices and different screen resolutions, not only the workload will increase, but the subsequent maintenance costs will also increase accordingly

Images