Webpage self-adaptive layout method, server and computer readable storage medium

Abstract

The invention relates to the field of Web front-end development, and discloses a webpage self-adaptive layout method, which comprises the following steps of setting rem as a unit of attributes of elements width, height, margin, ping and left top in a CSS; when the webpage is opened, adjusting the font-size value of the HTML element according to the size of the screen, so that the attribute value of the element in the body is synchronously adjusted along with the font-size value; calculating the width-to-height ratio of the design draft and the width-to-height ratio of the terminal screen, andcomparing the width-to-height ratio of the design draft with the width-to-height ratio of the terminal screen to obtain a comparison result; optimizing the attribute values of the elements in the bodyaccording to the comparison result to obtain optimized attribute values of the elements in the body; and generating an optimized page according to the optimized attribute values of the elements in the body. Thus, according to the scheme, the size of the design draft can be directly converted into the code size, all elements of the page can be automatically adjusted to the proper size only by taking the width or height of the terminal as the judgment benchmark, the layout of all contents on the page is the same as the layout of the design draft, and the high proportion of the design is completely restored.

Description

technical field [0001] The invention relates to the field of Web front-end development, in particular to a web page self-adaptive layout method, a server and a computer-readable storage medium. Background technique [0002] At present, workers in the field of web front-end development mainly adopt solutions such as content area fixed-width layout and media query, JavaScript dynamic calculation of width and height, percentage layout, and fluid layout when encountering the problem of adaptive layout of web pages. The solution optimizes the layout of the page to a certain extent and optimizes the visual presentation effect, but it still cannot fully restore the size ratio of the design draft, or needs to fine-tune the layout, or need to hide some elements under smaller screens. For example, for the flow layout scheme, the width is defined by percentage during page layout, and the height is mostly fixed by pixels (pixel, px), so the display effect on some screens will become tha...

AI Technical Summary

Problems solved by technology

[0002] At present, workers in the field of web front-end development mainly adopt solutions such as content area fixed-width layout and media query, JavaScript dynamic calculation of width and height, percentage layout, and fluid layout when encountering the problem of adaptive layout of web pages. The solution optimizes the layout of the page to a certain extent and optimizes the visual presentation effect, but it still cannot fully restore the size ratio of the design draft, or needs to fine-tune the layout, or need to hide some elements under smaller screens

For example, for the flow layout scheme, the width is defined by percentage during page layout, and the height is mostly fixed by pixels (pixel, px), so the display effect on some screens will become that the width of some page elements is pulled It is very long, but the height is still the same as before. The actual display is very uncoordinated, and even the layout is chaotic. Often, the effect presented on a screen with only a few sizes is satisfactory. Whether it is a visual designer or a web page user , are unacceptable to this rendering effect

Images