Front-end layout methods, storage media, devices, and apparatus for global scaling

Abstract

This invention discloses a front-end layout method, storage medium, device, and apparatus for global scaling, relating to the field of front-end layout technology. The method includes acquiring page elements and dividing them into two layers, performing positioning processing on elements in different layers; listening for browser window change events, and when a browser window change event occurs, acquiring the width and height information of the layout root element; and dynamically setting the style value of the layout root element based on its width and height information. The first layer is the layout root element, and the second layer is the layout child elements. This invention can effectively achieve window scaling processing.

Description

Technical Field

[0001] This invention relates to the field of front-end layout technology, and specifically to a front-end layout method, storage medium, device, and apparatus for global scaling. Background Technology

[0002] Currently, there are three main types of commonly used adaptive layout methods for front-end development: global scaling layout, rem layout, and media query responsive layout. Rem layout is an implementation of flexible layout, where rem is a relative unit relative to the HTML (Hyper Text Markup Language) root element.

[0003] Specifically, global scaling layout refers to a layout where the interface scales proportionally with the browser. The drawback of this layout is that changes in the browser's aspect ratio can cause content distortion during scaling. Rem layout refers to a layout where page elements (text, buttons, images, etc.) are sized relative to the root node's rem value. When the root node's font size changes, the rem value scales proportionally. The disadvantage of this layout is that rem needs to be calculated manually during coding, resulting in slower coding speeds. Furthermore, improper handling can lead to overlapping or misalignment of page elements after scaling. Media query responsive layout refers to writing different layout code based on different browser window sizes. The disadvantage of this layout is that it can only adapt to windows specified by media queries; when the sizes differ significantly, the layout may become disordered. Summary of the Invention

[0004] In view of the deficiencies in the existing technology, the purpose of this invention is to provide a front-end layout method, storage medium, device and apparatus for global scaling, which can effectively realize the scaling processing of windows.

[0005] To achieve the above objectives, this invention provides a front-end layout method for global scaling, specifically including the following steps:

[0006] Get the page elements and divide them into two layers, then perform positioning processing on the elements in different layers;

[0007] Listen for browser window change events, and when a browser window change event occurs, obtain the width and height information of the layout root element;

[0008] Based on the width and height information of the layout root element, the style value of the layout root element is dynamically set.

[0009] The first layer is the layout root element, and the second layer is the layout child elements.

[0010] Based on the above technical solution, the steps of obtaining page elements, dividing the obtained page elements into two layers, and positioning the elements in different layers are as follows:

[0011] Obtain page elements and divide the obtained page elements into two layers, where the first layer is the layout root element and the second layer is the layout child element;

[0012] Position the layout root element fixed relative to the window, and position the layout child elements relative to the layout root element using percentages.

[0013] Based on the above technical solution, when positioning the layout root element, its initial size fills the browser window.

[0014] Based on the above technical solution, the steps of listening for browser window change events and obtaining the width and height information of the layout root element when the browser window change event is detected are as follows:

[0015] Listen for browser window change events through javascript to obtain the listening result;

[0016] Based on the listening result, when the browser window change event is detected, obtain the width and height information of the layout root element and calculate the scaling ratio of the page elements.

[0017] Based on the above technical solution, the specific calculation method for calculating the scaling ratio of page elements is as follows:

[0018] When r > R, S = W / w;

[0019] When r < R, S = H / h;

[0020] Where, S represents the scaling ratio of page elements, W is the width of the layout root element, H is the height of the layout root element, R is the width-to-height ratio of the layout root element, R = W / H, w is the width of the design draft, h is the height of the design draft, and r is the width-to-height ratio of the design draft.

[0021] Based on the above technical solution, the steps of dynamically setting the style value of the layout root element based on the width and height information of the layout root element are as follows:

[0022] Based on the width and height information of the layout root element and the calculated scaling ratio of page elements, dynamically set the style value of the layout root element through javascript.

[0023] Based on the above technical solution, the specific implementation method of dynamically setting the style value of the layout root element through javascript is as follows:

[0024] `transform:scale(${S}); width:$(W / S)px; height:${H / S}px;`

[0025] In this context, the string inside the `` symbol represents the style value of the layout root element, ${} is used to insert variables into the string, transform:scale represents the element scaling ratio, width represents the element width, height represents the element height, and px is the page size unit, representing the pixel size.

[0026] The present invention provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the program, it implements the steps of the aforementioned front-end layout method for global scaling.

[0027] The present invention provides a non-transitory computer-readable storage medium storing a computer program thereon, which, when executed by a processor, implements the steps of the aforementioned front-end layout method for global scaling.

[0028] This invention provides a front-end layout device for global scaling, comprising:

[0029] The layered module is used to retrieve page elements and divide them into two layers, and to perform positioning processing on elements in different layers.

[0030] The listener module is used to listen for browser window change events and, when a browser window change event occurs, obtain the width and height information of the layout root element.

[0031] The settings module is used to dynamically set the style value of the layout root element based on its width and height information.

[0032] The first layer is the layout root element, and the second layer is the layout child elements.

[0033] Compared with existing technologies, the advantages of this invention are as follows: By acquiring page elements and dividing them into two layers, positioning elements in different layers is performed. Then, browser window change events are listened to, and when a browser window change event occurs, the width and height information of the layout root element is obtained. Finally, based on the width and height information of the layout root element, the style value of the layout root element is dynamically set, realizing stepless scaling of the window without deformation or overlap during scaling. Compared with ordinary global scaling layout, it solves the problem of no deformation when scaling changes the aspect ratio of the browser. Compared with rem layout, the layout size can be laid out according to the pixel ratio of the design draft, and it will not cause the font and outer border to overlap when the scaling factor is slightly large. Compared with media query responsive layout, the scaling factor is unlimited, and stepless scaling can be achieved as long as visually permissible. Attached Figure Description

[0034] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0035] Figure 1 This is a flowchart of a front-end layout method for global scaling in an embodiment of the present invention. Detailed Implementation

[0036] This invention provides a front-end layout method for global scaling. It acquires page elements and divides them into two layers, performs positioning processing on elements in different layers, listens for browser window change events, and when a browser window change event occurs, obtains the width and height information of the layout root element. Finally, based on the width and height information of the layout root element, it dynamically sets the style value of the layout root element, achieving stepless scaling of the window without distortion or overlap during scaling. Compared to ordinary global scaling layouts, it solves the problem of non-distortion during scaling when the browser aspect ratio changes. Compared to rem layouts, the layout size can be laid out pixel-for-pixel according to the design draft, and it will not cause the font and outer border to overlap when the scaling factor is slightly larger. Compared to media query responsive layouts, the scaling factor is unlimited, and stepless scaling can be achieved as long as visually permissible. This invention also correspondingly provides an electronic device, a non-transitory computer-readable storage medium, and a front-end layout device for global scaling.

[0037] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are some embodiments of this application, but not all embodiments.

[0038] See Figure 1 As shown in the figure, the front-end layout method for global scaling provided by this embodiment of the invention specifically includes the following steps:

[0039] S1: Get the page elements and divide them into two layers, and perform positioning processing on the elements in different layers; the first layer is the layout root element, and the second layer is the layout child elements.

[0040] In this invention, page elements are acquired and divided into two layers. Elements in different layers are then positioned. Specific steps include:

[0041] S101: Get the page elements and divide the obtained page elements into two layers, where the first layer is the layout root element and the second layer is the layout child elements;

[0042] S102: Position the layout root element relative to the window using the `fixed` property, and position the layout child elements relative to the layout root element using percentage positioning. `fixed` is a positioning method in CSS; CSS is a computer language for defining the style of UI elements.

[0043] In this invention, the layout root element is positioned such that its initial size fills the browser window.

[0044] The page elements are divided into two layers: the first layer is the layout root element, and the second layer is the layout child elements. The layout root element is positioned relative to the window using the `fixed` property, and its initial size fills the browser window. The layout child elements are positioned relative to the layout root element using percentage positioning.

[0045] S2: Listen for browser window change events, and when a browser window change event occurs, obtain the width and height information of the layout root element;

[0046] In this invention, browser window change events are monitored, and when a browser window change event occurs, the width and height information of the layout root element is obtained. Specific steps include:

[0047] S201: Listen for browser window change events using JavaScript and obtain the listening results; JavaScript is a computer scripting language that can run on the browser side.

[0048] S202: Based on the monitoring result, when it is monitored that the browser window change event occurs, obtain the width and height information of the layout root element, and calculate the scaling ratio of the page elements.

[0049] In this invention, to calculate the scaling ratio of the page elements, the specific calculation method is as follows:

[0050] When r > R, S = W / w;

[0051] When r < R, S = H / h;

[0052] Where, S represents the scaling ratio of the page elements, W is the width of the layout root element, H is the height of the layout root element, R is the width-to-height ratio of the layout root element, R = W / H, w is the width of the design draft, h is the height of the design draft, and r is the width-to-height ratio of the design draft.

[0053] That is, by using JavaScript to monitor the browser window change event, when it is monitored that the browser window change event occurs, obtain the width and height information of the layout root element. At this time, assume that when the browser window change event occurs, the width, height, and width-to-height ratio of the layout root element are W, H, and R, and the width, height, and width-to-height ratio of the design draft are w, h, and r. Assume that the required scaling ratio of the page elements at this time is S. Then when r > R, S = W / w, and when r < R, S = H / h.

[0054] S3: Based on the width and height information of the layout root element, dynamically set the style value of the layout root element;

[0055] In this invention, to dynamically set the style value of the layout root element based on the width and height information of the layout root element, the specific steps include:

[0056] Based on the width and height information of the layout root element and the calculated scaling ratio of the page elements, use JavaScript to dynamically set the style value of the layout root element. style is a page element attribute used for the inline form of the element.

[0057] In this invention, use JavaScript to dynamically set the style value of the layout root element. Among them, the specific implementation method of setting the style value of the layout root element is:

[0058] `transform:scale(${S}); width:$(W / S)px; height:${H / S}px;`

[0059] In this context, the string inside the `` symbol represents the style value of the layout root element, ${} is used to insert variables into the string, transform:scale represents the element scaling ratio, width represents the element width, height represents the element height, and px is the page size unit, representing the pixel size.

[0060] The layout method of this invention enables stepless scaling of windows without any limitations. Compared to the original design modules, as long as the aspect ratio of the window size is not equal to that of the design draft, it will be scaled down proportionally (when the window aspect ratio is greater than that of the design draft, the scaling factor is calculated based on the window width, and then each module is positioned according to a percentage in the length direction; conversely, the scaling factor is calculated based on the window length, and then each module is positioned according to a percentage in the width direction). Each module is then evenly positioned according to a percentage in the appropriate position on the design draft. This invention is compatible with any screen, provided the visual size allows. The closer the window aspect ratio is to that of the design draft, the closer the scaling is to 1:1. In extreme sizes (theoretical sizes; normal large screens will not have this size), compared to other solutions that are completely incompatible, this invention provides a more suitable adaptation.

[0061] This invention's front-end layout method for global scaling obtains page elements and divides them into two layers. Elements in different layers are positioned, and browser window change events are monitored. When a browser window change event occurs, the width and height information of the layout root element is obtained. Finally, based on this information, the style value of the layout root element is dynamically set, achieving stepless scaling of the window without distortion or overlap during scaling. Compared to ordinary global scaling layouts, this solves the problem of distortion during scaling when the browser's aspect ratio changes. Compared to rem layouts, the layout size can be set pixel-for-pixel according to the design draft, and there is no overlap between fonts and outer borders at slightly larger scaling ratios. Compared to media query responsive layouts, there is no limit to the scaling factor; stepless scaling can be achieved as long as visually permissible.

[0062] This invention provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the program, it implements the steps of the aforementioned front-end layout method for global scaling.

[0063] In one possible implementation, the present invention also provides a non-transitory computer-readable storage medium located in a PLC (Programmable Logic Controller) controller. The storage medium stores a computer program that, when executed by a processor, implements the steps of the following front-end layout method for global scaling:

[0064] Get the page elements and divide them into two layers, then perform positioning processing on the elements in different layers;

[0065] Listen for browser window change events, and when a browser window change event occurs, obtain the width and height information of the layout root element;

[0066] Based on the width and height information of the layout root element, the style value of the layout root element is dynamically set.

[0067] The first layer is the layout root element, and the second layer is the layout child elements.

[0068] Storage media may be any combination of one or more computer-readable media. A computer-readable medium may be a computer-readable signal medium or a computer-readable storage medium. Computer-readable storage media may be, for example, but not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatuses, or devices, or any combination thereof. More specific examples (a non-exhaustive list) of computer-readable storage media include: electrical connections having one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof. In this document, a computer-readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.

[0069] Computer-readable signal media may include data signals propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, capable of transmitting, propagating, or transmitting programs for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium may be transmitted using any suitable medium, including but not limited to: wireless, wireline, optical fiber, RF, etc., or any suitable combination thereof.

[0070] Computer program code for performing the operations of this invention can be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages—such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0071] The present invention provides a front-end layout device for global scaling, including a layering module, a listening module, and a setting module.

[0072] The layering module is used to obtain page elements and divide them into two layers, performing positioning processing on elements in different layers; the listening module is used to listen for browser window change events, and when a browser window change event occurs, it obtains the width and height information of the layout root element; the setting module is used to dynamically set the style value of the layout root element based on the width and height information of the layout root element; where the first layer is the layout root element, and the second layer is the layout child elements.

[0073] In this invention, page elements are acquired and divided into two layers. Elements in different layers are then positioned. Specific steps include:

[0074] Get the page elements and divide them into two layers: the first layer is the layout root element, and the second layer is the layout child elements.

[0075] The layout root element is positioned fixed relative to the window, and the layout child elements are positioned relative to the layout root element using percentages.

[0076] In the present invention, when positioning the layout root element, the initial size fills the browser window.

[0077] In the present invention, the browser window change event is listened for, and when it is detected that the browser window change event has occurred, the width and height information of the layout root element is obtained. The specific steps include:

[0078] The browser window change event is listened for through javascript to obtain the listening result;

[0079] Based on the listening result, when it is detected that the browser window change event has occurred, the width and height information of the layout root element is obtained, and the scaling ratio of the page elements is calculated.

[0080] In the present invention, the calculation of the scaling ratio of the page elements is carried out. The specific calculation method is:

[0081] When r > R, S = W / w;

[0082] When r < R, S = H / h;

[0083] Where, S represents the scaling ratio of the page elements, W is the width of the layout root element, H is the height of the layout root element, R is the width-to-height ratio of the layout root element, R = W / H, w is the width of the design draft, h is the height of the design draft, and r is the width-to-height ratio of the design draft.

[0084] In the present invention, based on the width and height information of the layout root element, the style value of the layout root element is dynamically set. The specific steps include:

[0085] Based on the width and height information of the layout root element and the calculated scaling ratio of the page elements, the style value of the layout root element is dynamically set through javascript.

[0086] In the present invention, the style value of the layout root element is dynamically set through javascript. Among them, the specific implementation method of setting the style value of the layout root element is:

[0087] `transform:scale(${S}); width:$(W / S)px; height:${H / S}px;`

[0088] Where, the string within the `` symbol represents the style value string of the layout root element, and ${} represents a variable inserted into the string.

[0089] The front-end layout device for global scaling in this invention acquires page elements and divides them into two layers. It then positions elements in different layers, listens for browser window change events, and when a browser window change event occurs, acquires the width and height information of the layout root element. Finally, based on this information, it dynamically sets the style value of the layout root element, achieving stepless scaling of the window without distortion or overlap during scaling. Compared to ordinary global scaling layouts, it solves the problem of non-distortion during scaling when the browser's aspect ratio changes. Compared to rem layouts, the layout size can be laid out pixel-for-pixel according to the design draft, and it does not cause overlap between fonts and outer borders at slightly larger scaling ratios. Compared to media query responsive layouts, the scaling ratio is unlimited; stepless scaling can be achieved as long as visually permissible.

[0090] The above description is merely a specific embodiment of this application, enabling those skilled in the art to understand or implement this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features claimed herein.

[0091] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

Claims

1. A front-end layout method for global scaling, characterized in that, Specifically, it includes the following steps: Obtain page elements and divide the obtained page elements into two layers, and perform positioning processing on the elements in different layers; Listen for browser window change events, and when it is detected that a browser window change event occurs, obtain the width and height information of the layout root element; Based on the width and height information of the layout root element, dynamically set the style value of the layout root element; Among them, the first layer is the layout root element, and the second layer is the layout child element; Among them, the steps of listening for browser window change events and obtaining the width and height information of the layout root element when it is detected that a browser window change event occurs specifically include: Listen for browser window change events through javascript to obtain a listening result; Based on the listening result, when it is detected that a browser window change event occurs, obtain the width and height information of the layout root element and calculate the scaling ratio of page elements; Among them, the calculation method of calculating the scaling ratio of page elements is specifically: When r > R, S = W / w; When r < R, S = H / h; Among them, S represents the scaling ratio of page elements, W is the width of the layout root element, H is the height of the layout root element, R is the width-to-height ratio of the layout root element, R = W / H, w is the width of the design draft, h is the height of the design draft, and r is the width-to-height ratio of the design draft.

2. The front-end layout method for global scaling as described in claim 1, characterized in that, The steps of obtaining page elements and dividing the obtained page elements into two layers and performing positioning processing on the elements in different layers specifically include: Obtain page elements and divide the obtained page elements into two layers, where the first layer is the layout root element and the second layer is the layout child element; Position the layout root element fixed relative to the window, and position the layout child element relative to the layout root element using percentage positioning.

3. The front-end layout method for global scaling as described in claim 2, characterized in that: When positioning the layout root element, the initial size fills the browser window.

4. The front-end layout method for global scaling as described in claim 1, characterized in that, The steps of dynamically setting the style value of the layout root element based on the width and height information of the layout root element specifically include: Based on the width and height information of the layout root element and the calculated scaling ratio of page elements, dynamically set the style value of the layout root element through javascript.

5. A front-end layout method for global scaling as described in claim 4, characterized in that, The style value of the layout root element is dynamically set through javascript. Among them, the specific implementation method of setting the style value of the layout root element is: `transform:scale(${S});width:$(W / S)px;height:${H / S}px;` Among them, the string inside the `` symbol represents the style value string of the layout root element, ${} represents a variable inserted in the string, transform:scale represents the element scaling ratio, width represents the element width, height represents the element height, and px is the page size unit, representing the pixel size.

6. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the steps of the front-end layout method for global scaling according to any one of claims 1 to 5.

7. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the steps of the front-end layout method for global scaling according to any one of claims 1 to 5.

8. A front-end layout device for global scaling, characterized in that, It includes: A hierarchical module for obtaining page elements and dividing the obtained page elements into two layers, and performing positioning processing on elements in different layers; A monitoring module for monitoring browser window change events, and when a browser window change event is monitored to occur, obtaining the width and height information of the layout root element; A setting module for dynamically setting the style value of the layout root element based on the width and height information of the layout root element; Among them, the first layer is the layout root element, and the second layer is the layout child element; Among them, the steps of monitoring the browser window change event and obtaining the width and height information of the layout root element when the browser window change event is monitored to occur specifically include: Monitoring the browser window change event through javascript to obtain a monitoring result; Based on the monitoring result, when a browser window change event is monitored to occur, obtaining the width and height information of the layout root element and calculating the page element scaling ratio; Among them, the calculation method of calculating the page element scaling ratio specifically is: When r > R, S = W / w; When r < R, S = H / h; Among them, S represents the page element scaling ratio, W is the width of the layout root element, H is the height of the layout root element, R is the width-to-height ratio of the layout root element, R = W / H, w is the width of the design draft, h is the height of the design draft, and r is the width-to-height ratio of the design draft.

Images