A web page layout method, device, equipment and readable storage medium

Abstract

The present invention relates to a web page layout method, device, equipment and readable storage medium, belonging to the technical field of page layout. The method includes: obtaining an access request of a user for a target web page on the current page; in response to the access request, determining a target page layout and a target page structure corresponding to the target web page according to the screen width size of the browser corresponding to the current page, a pre-configured CSS file and an HTML file, wherein different page layouts corresponding to different screen width sizes are pre-configured in the CSS file, and different page structures corresponding to different screen width sizes are pre-configured in the HTML file; and displaying the target web page on the current page through the browser according to the target page layout and the target page structure. This application has the effect of ensuring that the web page can present a good visual effect on various devices and screen sizes and realizing the adaptability of the page.

Description

Technical Field

[0001] The present invention relates to the technical field of page layout, and particularly to a web page layout method, device, equipment and readable storage medium. Background Art

[0002] With the continuous development of the World Wide Web, web applications have become an indispensable part of people's daily life and work. However, different users use various types of devices and screen sizes, ranging from large desktop computers (PCs) to portable mobile phones and tablet computers. This poses a huge challenge to the layout design of web pages.

[0003] Traditional web page layout designs often adopt a fixed-width or fixed-grid approach, which performs well on specific devices and screen sizes, but may encounter problems such as layout disorders, incomplete element displays, or overly long page scroll bars on other devices. This not only affects the user experience but also increases the maintenance costs for developers. Summary of the Invention

[0004] The technical problem to be solved by the present invention is: how to ensure that a web page can present a good visual effect on various devices and screen sizes and achieve page adaptability.

[0005] The technical solution of the present invention to solve the above technical problem is as follows:

[0006] In the first aspect, the present application provides a web page layout method, adopting the following technical solution:

[0007] A web page layout method includes:

[0008] Obtain an access request of a user for a target web page on the current page;

[0009] In response to the access request, determine a target page layout and a target page structure corresponding to the target web page according to the screen width size of the browser corresponding to the current page, a pre-configured CSS file, and an HTML file, where different screen width sizes corresponding to page layouts are pre-configured in the CSS file, and different screen width sizes corresponding to page structures are pre-configured in the HTML file. The page layout represents the arrangement and combination of each element in the web page, and the page structure represents the hierarchical relationship of the content in the web page;

[0010] Display the target web page on the current page through the browser according to the target page layout and the target page structure.

[0011] The beneficial effects of the present invention are as follows: By obtaining the screen width size information of the current window of the browser, the target page layout and the target page structure corresponding to the target web page are dynamically adjusted according to the screen size of the user device. According to different screen sizes, the arrangement, size, spacing, etc. of elements can be automatically adjusted, so that the page can maintain a consistent visual effect and user experience on different devices. By pre-configuring different page layouts corresponding to different screen width sizes in the CSS file and pre-configuring different page structures corresponding to different screen width sizes in the HTML file, the separation of styles and structures is achieved. This separation makes the styles and content of the page easier to manage and maintain, and at the same time improves the readability and reusability of the code.

[0012] Based on the above technical solutions, the present invention can be further improved as follows.

[0013] Further, the CSS file includes global variables, row attributes, column attributes, grid layout methods, preset response sizes, and hidden classes corresponding to breakpoints corresponding to different screen width sizes; the HTML file includes element types, element attributes, element hierarchy relationships, or local variables corresponding to different screen width sizes;

[0014] The global variables include the width of each row of the grid system, the number of grids in a row, the interval between columns, the layout method of the row, the layout method of the row in the flex layout mode, and the moving method of the column;

[0015] The row attributes include the overall layout and style of the row;

[0016] The column attributes include the overall layout and style of the column;

[0017] The grid layout methods include normal layout, mixed layout, and responsive layout;

[0018] The preset response sizes and the hidden classes corresponding to breakpoints are grids corresponding to classes for setting the hiding or showing of specific elements according to the preset response sizes;

[0019] The element types represent the page structures corresponding to different screen width sizes;

[0020] The element attributes represent the appearance and response methods of elements corresponding to different screen width sizes, and the response methods represent the display attributes of the elements;

[0021] The element hierarchy relationships represent the hierarchy relationships of elements corresponding to different screen width sizes in the corresponding page structures;

[0022] The local variables include the width of any one or more lines, the number of grids in a line, the interval between columns, the layout method of a line, the layout method in the flex layout mode, and the moving method of columns.

[0023] The beneficial effects of adopting the above further scheme are as follows: The basic layout is realized by creating a basic layout using a single row and column, and the layout can be freely combined through the attributes of the column. The hybrid layout is realized by arbitrarily expanding and combining the nested basic grid numbers to form a more complex hybrid layout. The responsive layout is realized by setting different values through the preset responsive sizes and combining the hidden classes based on breakpoints to achieve a free responsive layout.

[0024] By presetting the responsive sizes and the hidden classes corresponding to the breakpoints, this method can achieve the responsive design of the page. This means that when the size of the browser window changes, the page can automatically adjust the display and hiding of elements to adapt to different screen sizes.

[0025] Further, after displaying the target web page on the current page through the browser according to the target page layout and the target page structure, it further includes:

[0026] When the window size of the browser changes, re-obtain the screen width size of the browser corresponding to the current page to obtain a new screen width size;

[0027] According to the new screen width size, the CSS file, and the HTML file, determine the new target page layout and the new target page structure corresponding to the current target web page;

[0028] According to the new target page layout and the new target page structure, display the target web page on the current page through the browser.

[0029] The beneficial effects of adopting the above further scheme are as follows: By listening to the browser window size change event, the page can real-time sense the operation of the user adjusting the browser window size. Once the window size changes, the page will immediately re-obtain the new screen width size information, and based on this information, the CSS file, and the HTML file, determine the new target page layout and the new target page structure corresponding to the current target web page, and re-render and display the page according to the new target page structure and the new target page layout. This enables the page to respond to the window size change in real-time and always maintain the best layout effect.

[0030] Further, the determining the target page layout and the target page structure corresponding to the target web page according to the screen width size of the browser corresponding to the current page, the CSS file, and the HTML file includes:

[0031] Check whether there are local variables in the HTML file;

[0032] If there are local variables in the HTML file, based on the priority of the preset local variables, overwrite the corresponding content in the global variables with the content in the local variables to form new variable information;

[0033] Based on the screen width size of the browser corresponding to the current page, the new variable information, the attributes of the row, the attributes of the column, the grid layout method, the preset response size, and the hidden classes corresponding to the breakpoints, determine the target page layout corresponding to the target web page;

[0034] Based on the screen width size of the browser corresponding to the current page, the element type, the element attributes, and the element hierarchy relationship, determine the target page structure corresponding to the target web page.

[0035] The beneficial effect of adopting the above further solution is that by defining local variables in the HTML file, developers can customize certain parameters of the grid system according to the requirements of specific pages. This allows developers to more precisely control attributes such as the number and width of the grids, thereby achieving a more flexible and personalized page layout. The combination of global variables and local variables enables developers to define a set of general grid system styles in the CSS file and make local adjustments according to the needs of specific pages in the HTML file. This method not only ensures the unity of styles but also simplifies the style maintenance process because most styles only need to be updated in the CSS file, while the styles of specific pages can be achieved by modifying the local variables in the HTML file.

[0036] Furthermore, if no local variables are defined in the HTML file, determining the target page layout corresponding to the target web page according to the screen width size of the browser corresponding to the current page and the CSS file includes:

[0037] Based on the screen width size of the browser corresponding to the current page, the global variables, the attributes of the row, the attributes of the column, the grid layout method, the preset response size, and the hidden classes corresponding to the breakpoints, determine the target page layout corresponding to the target web page.

[0038] The beneficial effect of adopting the above further solution is that if local variables do not need to be defined in the HTML file, its structure will be more concise and clear. This helps to reduce the amount of code, improve the readability and maintainability of the code. At the same time, it also reduces the risk of layout problems caused by incorrect definition of local variables.

[0039] Further, displaying the target web page on the current page through the browser according to the target page layout and target page structure includes:

[0040] Performing responsive breakpoint detection according to the screen width size of the browser corresponding to the current page and a preset responsive size to obtain the display level of the page layout;

[0041] Based on the display level, determining the grid hiding class and grid size of the current page in the CSS file;

[0042] Rendering the elements to be displayed in each grid based on the grid hiding class, grid size, the target page layout and target page structure to implement the display of the target web page.

[0043] The beneficial effect of adopting the above further solution is that: by performing responsive breakpoint detection according to the screen width size information and the preset responsive size, it is possible to accurately determine the size range of the current browser window, and accordingly determine the display level of the page layout. This enables the page to automatically adjust the layout and style according to different screen sizes, achieving a more precise responsive design. Based on the display level, the hiding class and size of the grid can be determined. This means that on different screen sizes, the page can flexibly hide or display specific grids, as well as adjust the size and spacing of the grids. This flexibility enables the page to better adapt to different devices and screen sizes, providing the best user experience.

[0044] Further, performing responsive breakpoint detection according to the screen width size of the browser corresponding to the current page and a preset responsive size to obtain the display level includes:

[0045] When the screen width size information is less than 768px, the display level of the current browser window is the first size level;

[0046] When the screen width size information is not less than 768px and less than 992px, the display level of the current browser window is the second size level;

[0047] When the screen width size information is not less than 992px and less than 1200px, the display level of the current browser window is the third size level;

[0048] When the screen width size information is not less than 1200px and less than 1920px, the display level of the current browser window is the fourth size level;

[0049] When the screen width size information is not less than 1920px, the display level of the current browser window is the fifth size level;

[0050] Among them, the screen width size information corresponding to the first size level is less than the screen width size information corresponding to the second size level, the screen width size information corresponding to the second size level is less than the screen width size information corresponding to the third size level, the screen width size information corresponding to the third size level is less than the screen width size information corresponding to the fourth size level, and the screen width size information corresponding to the fourth size level is less than the screen width size information corresponding to the fifth size level.

[0051] The beneficial effect of adopting the above further solution is that by adjusting the display level according to the screen size, the page layout and element sizes can better fit the user's device screen, providing better readability and operability. On devices of different sizes, users can obtain a comfortable and intuitive browsing experience.

[0052] In a second aspect, the present application provides a web page layout device, adopting the following technical solution:

[0053] A web page layout device, characterized by comprising:

[0054] An acquisition module, configured to acquire an access request of a user for a target web page on the current page;

[0055] A response module, configured to, in response to the access request, determine a target page layout and a target page structure corresponding to the target web page according to the screen width size of the browser corresponding to the current page, a pre-configured CSS file, and an HTML file, wherein different page layouts corresponding to different screen width sizes are pre-configured in the CSS file, different page structures corresponding to different screen width sizes are pre-configured in the HTML file, the page layout represents the arrangement and combination manner of each element in the web page, and the page structure represents the hierarchical relationship of the content in the web page;

[0056] A display module, configured to display the target web page on the current page through the browser according to the target page layout and the target page structure.

[0057] The beneficial effects of the present invention are as follows: By obtaining the screen width size information of the current window of the browser, the target page layout and the target page structure corresponding to the target web page are dynamically adjusted according to the screen size of the user device. According to different screen sizes, the arrangement, size, spacing, etc. of elements can be automatically adjusted, so that the page can maintain a consistent visual effect and user experience on different devices. By pre-configuring different page layouts corresponding to different screen width sizes in the CSS file and pre-configuring different page structures corresponding to different screen width sizes in the HTML file, the separation of styles and structures is achieved. This separation makes the styles and content of the page easier to manage and maintain, and at the same time improves the readability and reusability of the code.

[0058] In a third aspect, the present application provides an electronic device, adopting the following technical solution:

[0059] An electronic device includes a memory and a processor, and a computer program capable of being loaded and executed by the processor for a web page layout method according to any one of the first aspects is stored on the memory.

[0060] In a fourth aspect, the present application provides a computer-readable storage medium, adopting the following technical solution:

[0061] A computer-readable storage medium stores a computer program capable of being loaded and executed by the processor for a web page layout method according to any one of the first aspects. BRIEF DESCRIPTION OF THE DRAWINGS

[0062] Figure 1 is a schematic flow chart of a web page layout method of the present invention;

[0063] Figure 2 is a structural block diagram of a web page layout device of the present invention;

[0064] Figure 3 is a structural block diagram of an electronic device of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0065] The following further elaborates on the present application with reference to the accompanying drawings.

[0066] To make the objectives, technical solutions, and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present application. Apparently, the described embodiments are some but not all of the embodiments of the present application. All other embodiments obtained by those of ordinary skill in the art without creative efforts based on the embodiments in the present application belong to the scope of protection of the present application.

[0067] An embodiment of the present application provides a web page layout method based on HTML and CSS, which executes depending on CSS attribute selectors. This web page layout method can be executed by an electronic device, which can be a mobile terminal device. The mobile terminal device can be a laptop, a desktop computer, a mobile phone, a tablet computer, etc., but is not limited thereto.

[0068] The following further describes the embodiments of the present application in detail with reference to the accompanying drawings of the specification. As Figure 1 shown,

[0069] Step S1: Obtain a user's access request for a target web page on the current page;

[0070] In an embodiment of the present application, when a user clicks or triggers an operation (such as clicking a link, a button, etc.) on the current page to access a target web page, the browser sends an HTTP request to the server. This request usually includes the URL (i.e., the address of the target web page) that the user wants to access, as well as other relevant information, such as the request method (GET, POST, etc.), the request headers (including the browser type, user agent, etc.), and possibly the request body (for a POST request).

[0071] Step S2: In response to the access request, determine the target page layout and target page structure corresponding to the target web page according to the screen width size of the browser corresponding to the current page, a pre-configured CSS file, and an HTML file. Among them, different page layouts corresponding to different screen width sizes are pre-configured in the CSS file, and different page structures corresponding to different screen width sizes are pre-configured in the HTML file. The page layout represents the arrangement and combination method of each element in the web page, and the page structure represents the hierarchical relationship of the content in the web page. The hierarchical relationship of the content refers to the logical and organizational structure between the page contents. The hierarchical relationship of the content in the page determines which content is the most important, which content is secondary, and their association and order. An element is a basic component that makes up a web page, and an element can be text, a picture, a video, a link, a button, etc.;

[0072] In an embodiment of the present application, the screen width size information refers to data such as the width and pixel ratio of the page window currently accessed by the user. Specifically, if the page is displayed full-screen on the user terminal, then the screen width size information of the page can include the screen resolution data of the user terminal; if the page is displayed by the browser, then the screen width size information of the page can include the resolution data of the browser window.

[0073] In the embodiment of the present application, the CSS file includes global variables corresponding to different screen width sizes, attributes of rows, attributes of columns, grid layout methods, preset response sizes, and hidden classes corresponding to breakpoints.

[0074] Among them, the global variables of the grid system are set through CSS selectors, including: the width of the default row is 100% of the browser window, that is, the row will occupy the entire width of its parent element. The number of grids in a row in the grid system is defaulted to 24 grids per row. The interval between columns in the grid system is defaulted to 0 pixels, that is, there is no interval between columns. The layout method of the row is defaulted to a block layout from left to right. The layout method of the row in the flex layout mode is defaulted to the horizontal alignment method and the vertical alignment method. The moving method of the column is defaulted to the default number of columns that the column moves to the right, and the default number of columns is 0.

[0075] Set the attributes of the rows in the grid system. The attributes of the row are the overall layout and style of the row. Specifically, it is set that in the style attribute of the row, --t:value is used to specify the total number of grids in each row, that is, the row is evenly divided into value grids, and the width of each grid is 1 / value. For example, if --t:24, then the width of each grid is 1 / 24; in the style attribute of the row, --g:value is used to specify the interval between columns. For example, if --g:10px, then the interval between columns is specified as 10 pixels; in the style attribute of the row, --d:flex / block is used to specify whether to use flex layout to flexibly align the columns; in the style attribute of the row, if --d:flex and --fh:value are set, then the horizontal arrangement method justify-content of the row in the flex layout is allowed to be one of start / end / center / space-around / space-between; in the style attribute of the row, if --d:flex and --fv:value are set, then the vertical arrangement method align-content of the row in the flex layout is allowed to be one of top / middle / bottom.

[0076] Set the attributes of the columns in the grid system. The attributes of the column are the overall layout and style of the column. Specifically, it is set that in the style attribute of the column, --s:value is used to specify the number of grids occupied by this column. For example, if --t:24 is set in the style attribute of the row and --s:12 is set in the style attribute of the column, then the total number of grids in each row is 24, and the width of the column is the width of 12 grids. Since the width of each grid is 1 / 24, the width of the column is 12 / 24.

[0077] Set the number of grid cells occupied by a column within a specified screen size range according to the preset display level setting in the style attribute of the column; set --o:value in the style attribute of the column, and specify that the value of the right offset of the current column is achieved by margin-left:value.

[0078] In the embodiments of the present application, five display levels are defined according to the preset response size. First, when the screen width size information is less than 768px, the display level of the current browser window is the first size level --xs;

[0079] Second, when the screen width size information is not less than 768px and less than 992px, the display level of the current browser window is the second size level --sm;

[0080] Third, when the screen width size information is not less than 992px and less than 1200px, the display level of the current browser window is the third size level --md;

[0081] Fourth, when the screen width size information is not less than 1200px and less than 1920px, the display level of the current browser window is the fourth size level --lg;

[0082] Fifth, when the screen width size information is not less than 1920px, the display level of the current browser window is the fifth size level --xl.

[0083] Among them, the screen width size information corresponding to the first size level is less than the screen width size information corresponding to the second size level, the screen width size information corresponding to the second size level is less than the screen width size information corresponding to the third size level, the screen width size information corresponding to the third size level is less than the screen width size information corresponding to the fourth size level, and the screen width size information corresponding to the fourth size level is less than the screen width size information corresponding to the fifth size level.

[0084] Set the hidden classes for the breakpoints corresponding to the preset response size. Based on a series of CSS class names defined by the preset response size, for each size range, one or more breakpoints will be set, and these breakpoints are used to trigger style changes. When the screen size of the device reaches or exceeds a certain breakpoint, the hidden class corresponding to that breakpoint will be applied, thereby changing the display state of the element.

[0085] For example, certain elements need to be hidden on devices with screen sizes corresponding to the second size level, while they need to be displayed on devices with screen sizes corresponding to the second level. In this case, define a hidden class (such as.hide-on-small) and apply it to the elements that need to be hidden. Then, in CSS, use a media query to specify that when the screen size reaches medium screen and above, remove this hidden class to make the elements visible.

[0086] In the embodiment of the present application, the HTML file includes element types, element attributes, element hierarchy relationships, or local variables corresponding to different screen width sizes.

[0087] Among them, the element type characterizes the page structure corresponding to different screen width sizes, and the element types include: title elements (such as <h1>to< / h1> <h6>)), falling elements (such as )), table elements (such as 、 and ) Link elements (such as )), Image elements (such as )), Form elements (such as <input> , <textarea>etc.) and container elements (such as< / textarea> 、 <section> 、 <article>etc.)

[0088] Element attributes characterize how the appearance and response of an element are adjusted according to different screen sizes. The response mode characterizes the display attributes of the element. The display attribute indicates how the element is scaled at a certain screen width size to adapt to that screen width size, whether the element needs to be hidden or shown, etc., to adapt to that screen width size. For example, through CSS media queries, we can set that when the screen width is less than a certain value, the element automatically shrinks or hides; when the screen width is greater than a certain value, the element is shown or enlarged. This responsive design ensures that the page can be well presented on different devices. The appearance includes color, font, border, shadow, etc.

[0089] The element hierarchy relationship characterizes the hierarchy relationship of elements in the corresponding page structure corresponding to different screen width sizes. The element hierarchy relationship determines the relative positions of elements.

[0090] The local variables include the width of any one or more lines, the number of grids in a line, the interval between columns, the layout mode of a line, the layout mode in the flex layout mode of a line, and the movement mode of columns.

[0091] Specifically, according to the screen width size of the browser corresponding to the current page, the CSS file, and the HTML file, determine the target page layout and target page structure corresponding to the target web page, including:

[0092] Detect whether there are local variables in the HTML file;

[0093] If there are local variables in the HTML file, based on the preset priority of the local variables, overwrite the corresponding content in the global variables with the content in the local variables to form new variable information;

[0094] Based on the screen width size of the browser corresponding to the current page, the new variable information, the attributes of the line, the attributes of the column, the grid layout mode, the preset response size, and the hidden class corresponding to the breakpoint, determine the target page layout corresponding to the target web page;

[0095] Based on the screen width size of the browser corresponding to the current page, the element type, the element attributes, and the element hierarchy relationship, determine the target page structure corresponding to the target web page.

[0096] If the local variables are not defined in the HTML file, determine the target page layout corresponding to the target web page based on the screen width size of the browser corresponding to the current page, the global variables, the attributes of the row, the attributes of the column, the grid layout method, the preset response size, and the hidden classes corresponding to the breakpoints.

[0097] By defining local variables in the HTML file, developers can customize certain parameters of the grid system according to the requirements of specific pages. This allows developers to more precisely control attributes such as the number and width of the grids, thus achieving a more flexible and personalized page layout. The combination of global variables and local variables enables developers to define a set of general grid system styles in the CSS file and make local adjustments in the HTML file according to the specific page needs. This approach not only ensures the unity of styles but also simplifies the style maintenance process because most styles only need to be updated in the CSS file, while the styles for specific pages can be achieved by modifying the local variables in the HTML file.

[0098] Step S3, display the target web page on the current page through the browser according to the target page layout and the target page structure.

[0099] In the embodiment of the present application, step S3 includes:

[0100] Perform responsive breakpoint detection according to the screen width size of the browser corresponding to the current page and the preset response size to obtain the display level of the page layout;

[0101] Based on the display level, determine the grid hidden classes and grid sizes of the current page in the CSS file;

[0102] Render the elements to be displayed in each grid based on the grid hidden classes, grid sizes, the target page layout, and the target page structure to achieve the display of the target web page.

[0103] Obtain the width of the current browser window by using the window.innerWidth property of JavaScript, compare the obtained screen width with the preset breakpoints, and thus determine the display level of the page layout corresponding to the current screen size. This enables the page to automatically adjust the layout and styles according to different screen sizes, achieving a more precise responsive design. Based on the display level, determine the hidden classes and sizes of the grids. This means that on different screen sizes, the page can flexibly hide or display specific grids, as well as adjust the size and spacing of the grids. This flexibility enables the page to better adapt to different devices and screen sizes, providing the best user experience.

[0104] According to the definition of the display level and the grid hiding class, use JavaScript or directly set the corresponding class in the HTML element to control the display or hiding of the grid.

[0105] Through CSS or JavaScript, apply the calculated grid size to the corresponding grid element. Put the elements to be displayed (such as text, pictures, etc.) into the corresponding grid through DOM operations or template engines. According to the grid system style and display level, apply other relevant style rules, such as font size, color, alignment, etc. The browser draws and displays the web page according to the final DOM structure and style information.

[0106] As another alternative implementation of the embodiment of the present application, after displaying the target web page on the current page through the browser according to the target page layout and the target page structure, it further includes:

[0107] When the window size of the browser changes, re-obtain the screen width size of the browser corresponding to the current page to obtain a new screen width size;

[0108] According to the new screen width size, the CSS file, and the HTML file, determine the new target page layout and the new target page structure corresponding to the current target web page;

[0109] According to the new target page layout and the new target page structure, display the target web page on the current page through the browser.

[0110] By listening to the browser window size change event, the page can real-time sense the operation of the user adjusting the browser window size. Once the window size changes, the page will immediately re-obtain the new screen width size information, and according to the new screen width size, the CSS file, and the HTML file, determine the new target page layout and the new target page structure corresponding to the current target web page, and re-render and display the page. This enables the page to real-time respond to the change of the window size and always maintain the best layout effect.

[0111] This method obtains the screen width size information of the current window of the browser and dynamically adjusts the target page layout and target page structure corresponding to the target web page according to the screen size of the user device. According to different screen sizes, it can automatically adjust the arrangement, size, spacing, etc. of elements, so that the page can maintain a consistent visual effect and user experience on different devices. Different page layouts corresponding to different screen width sizes are pre-configured in the CSS file, and different page structures corresponding to different screen width sizes are pre-configured in the HTML file, realizing the separation of styles and structures. This separation makes the styles and content of the page easier to manage and maintain, and at the same time improves the readability and reusability of the code.

[0112] The program for the browser of the electronic device to load the CSS file and the HTML file is as follows:

[0113] Grid system "row" element settings:

[0114]

[0115] Grid system "column" element settings:

[0116] .col{

[0117] --s:var(--t);

[0118] width:calc(var(--w) / var(--t)*var(--s));

[0119] float:left;

[0120] margin-left:calc(var(--w) / var(--t)*var(--o));

[0121] padding-left:calc(var(--g) / 2);

[0122] padding-right:calc(var(--g) / 2);

[0123] }

[0124] Grid system five grid level settings:

[0125] @media only screen and(max-width:767px){

[0126] .col[style~="--xs:"]{--s:var(--xs);}

[0127] }

[0128] @media only screen and (min-width: 768px) {

[0129] .col[style~="--sm:"] { --s: var(--sm);}

[0130] }}

[0131] @media only screen and (min-width: 992px) {

[0132] .col[style~="--md:"] { --s: var(--md);}

[0133] }}

[0134] @media only screen and (min-width: 1200px) {

[0135] .col[style~="--lg:"] { --s: var(--lg);}

[0136] }}

[0137] @media only screen and (min-width: 1920px) {

[0138] .col[style~="--xl:"] { --s: var(--xl);}

[0139] }}

[0140] Grid system hidden class settings:

[0141] @media only screen and (max-width: 767px) {

[0142] .hidden-xs-only { display: none!important;}

[0143] }}

[0144] @media only screen and (min-width: 768px) {

[0145] .hidden-sm-and-up { display: none!important;}

[0146] }}

[0147] @media only screen and (min-width: 768px) and (max-width: 991px) {

[0148] .hidden-sm-only { display: none!important;}

[0149] }

[0150] @media only screen and (max-width: 991px) {

[0151] .hidden-sm-and-down { display: none!important;}

[0152] }

[0153] @media only screen and (min-width: 992px) {

[0154] .hidden-md-and-up { display: none!important;}

[0155] }

[0156] @media only screen and (min-width: 992px) and (max-width: 1199px) {

[0157] .hidden-md-only { display: none!important;}

[0158] }

[0159] @media only screen and (max-width: 1199px) {

[0160] .hidden-md-and-down { display: none!important;}

[0161] }

[0162] @media only screen and (min-width: 1200px) {

[0163] .hidden-lg-and-up { display: none!important;}

[0164] }

[0165] @media only screen and (min-width: 1200px) and (max-width: 1919px) {

[0166] .hidden-lg-only {display: none!important;}

[0167] }

[0168] @media only screen and (max-width: 1919px) {

[0169] .hidden-lg-and-down {display: none!important;}

[0170] }

[0171] @media only screen and (min-width: 1920px) {

[0172] .hidden-xl-only {display: none!important;}

[0173] }

[0174] Basic layout:

[0175]

[0176]

[0177] Hybrid layout:

[0178]

[0179] Responsive layout:

[0180] <div class＝"row"style＝"--t:24；--g:10px">

[0181] <div class＝"col hidden-xs-only"style＝"--xs:8；--sm:6；--md:4；--lg:3；--xl:1；">content

[0182] <div class＝"col"style＝"--xs:4；--sm:6；--md:8；--lg:9；--xl:11；">content

[0183] <div class＝"col"style＝"--xs:4；--sm:6；--md:8；--lg:9；--xl:11；">content

[0184] <div class＝"col hidden-xs-only"style＝"--xs:8；--sm:6；--md:4；--lg:3；--xl:1；">content

[0185] .

[0186] Figure 3 The structural block diagram of a web page layout device 200 is shown.

[0187] As Figure 3 shown, a web page layout device 200 mainly includes:

[0188] An acquisition module 201, configured to acquire an access request of a user for a target web page on the current page;

[0189] A response module 202, configured to, in response to the access request, determine a target page layout and a target page structure corresponding to the target web page according to the screen width size of the browser corresponding to the current page, a pre-configured CSS file, and an HTML file, wherein different screen width size-corresponding page layouts are pre-configured in the CSS file, and different screen width size-corresponding page structures are pre-configured in the HTML file, the page layout characterizing the arrangement and combination manner of each element in the web page, and the page structure characterizing the hierarchical relationship of the content in the web page;

[0190] A display module 203, configured to display the target web page on the current page through the browser according to the target page layout and the target page structure.

[0191] Optionally, the CSS file includes global variables, row attributes, column attributes, grid layout modes, preset response sizes, and hidden classes corresponding to breakpoints corresponding to different screen width sizes; the HTML file includes element types, element attributes, element hierarchical relationships, or local variables corresponding to different screen width sizes;

[0192] The global variables include the width of each row of the grid system, the number of grid cells in a row, the interval between columns, the layout mode of the row, the layout mode of the row in the flex layout mode, and the movement mode of the column;

[0193] The row attributes include the overall layout and style of the row;

[0194] The column attributes include the overall layout and style of the column;

[0195] The grid layout modes include normal layout, hybrid layout, and responsive layout;

[0196] The preset response sizes and the hidden classes corresponding to breakpoints are grids corresponding to classes for setting to hide or display specific elements according to the preset response sizes;

[0197] The element types characterize the page structures corresponding to different screen width sizes;

[0198] The element attributes characterize adjusting the appearance and response manner of the element according to different screen sizes, and the response manner includes scaling of the element, hiding of the element, and display of the element;

[0199] The element hierarchical relationships characterize the hierarchical relationships of elements corresponding to different screen width sizes in the corresponding page structures;

[0200] The local variables include the width of any one or more lines, the number of grids in a line, the interval between columns, the layout mode of a line, the layout mode in the flex layout mode of a line, and the movement mode of columns.

[0201] Optionally, the web page layout device further includes a monitoring module, and the monitoring module is specifically configured to:

[0202] After displaying the target web page on the current page through the browser according to the target page layout and the target page structure, when the window size of the browser changes, re-obtain the screen width size of the browser corresponding to the current page to obtain a new screen width size;

[0203] Determine a new target page layout and a new target page structure corresponding to the current target web page according to the new screen width size, the CSS file, and the HTML file;

[0204] Display the target web page on the current page through the browser according to the new target page layout and the new target page structure.

[0205] Optionally, the response module 202 is specifically configured to:

[0206] Detect whether there are local variables in the HTML file;

[0207] If there are local variables in the HTML file, based on the preset priority of the local variables, overwrite the corresponding content in the global variables with the content in the local variables to form new variable information;

[0208] Based on the screen width size of the browser corresponding to the current page, the new variable information, the attributes of the lines, the attributes of the columns, the grid layout mode, the preset response size, and the hidden classes corresponding to the breakpoints, determine the target page layout corresponding to the target web page;

[0209] Based on the screen width size of the browser corresponding to the current page, the element type, the element attributes, and the element hierarchical relationship, determine the target page structure corresponding to the target web page.

[0210] Optionally, the response module 202 is further specifically configured to:

[0211] If no local variables are defined in the HTML file, based on the screen width size of the browser corresponding to the current page, the global variables, the attributes of the lines, the attributes of the columns, the grid layout mode, the preset response size, and the hidden classes corresponding to the breakpoints, determine the target page layout corresponding to the target web page.

[0212] Optionally, the display module includes:

[0213] An acquisition sub-module, configured to perform responsive breakpoint detection according to the screen width size of the browser corresponding to the current page and a preset response size, and acquire the display level of the page layout;

[0214] A determination sub-module, configured to determine the grid hiding class and grid size of the current page in the CSS file based on the display level;

[0215] A display sub-module, configured to render the elements to be displayed in each grid based on the grid hiding class, grid size, the target page layout, and the target page structure, so as to implement the display of the target web page.

[0216] Optionally, the acquisition sub-module is specifically configured to:

[0217] When the screen width size information is less than 768 px, the display level of the current window of the browser is the first size level;

[0218] When the screen width size information is not less than 768 px and less than 992 px, the display level of the current window of the browser is the second size level;

[0219] When the screen width size information is not less than 992 px and less than 1200 px, the display level of the current window of the browser is the third size level;

[0220] When the screen width size information is not less than 1200 px and less than 1920 px, the display level of the current window of the browser is the fourth size level;

[0221] When the screen width size information is not less than 1920 px, the display level of the current window of the browser is the fifth size level;

[0222] Wherein, the screen width size information corresponding to the first size level is less than the screen width size information corresponding to the second size level, the screen width size information corresponding to the second size level is less than the screen width size information corresponding to the third size level, the screen width size information corresponding to the third size level is less than the screen width size information corresponding to the fourth size level, and the screen width size information corresponding to the fourth size level is less than the screen width size information corresponding to the fifth size level.

[0223] In one example, the modules in any of the above devices may be one or more integrated circuits configured to implement the above methods. For example: one or more application specific integrated circuits (ASICs), or one or more digital signal processors (DSPs), or one or more field programmable gate arrays (FPGAs), or a combination of at least two of these integrated circuit forms.

[0224] For another example, when the modules in the device can be implemented in the form of a processing element scheduler, the processing element may be a general-purpose processor, such as a central processing unit (CPU) or other processors that can call programs. For another example, these modules may be integrated together and implemented in the form of a system-on-a-chip (SOC).

[0225] In this application, various objects such as various messages / information / devices / network elements / systems / devices / actions / operations / processes / concepts, etc. may be named. It can be understood that these specific names do not constitute a limitation on the relevant objects, and the named names may change with factors such as scenarios, contexts, or usage habits. The understanding of the technical meaning of the technical terms in this application should be mainly determined from the functions and technical effects reflected / executed in the technical solutions.

[0226] Those skilled in the art can clearly understand that for the convenience and simplicity of description, the specific working processes of the systems, devices, and modules described above can refer to the corresponding processes in the foregoing method embodiments and will not be elaborated herein.

[0227] Those of ordinary skill in the art can realize that the modules and algorithm steps of each example described in combination with the embodiments disclosed herein can be implemented by electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. Professional technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of this application.

[0228] Figure 3 It is a structural block diagram of an electronic device 300 according to an embodiment of this application.

[0229] As Figure 3 As shown, the electronic device 300 includes a processor 301 and a memory 302, and may further include one or more of an information input / information output (I / O) interface 303 and a communication component 304.

[0230] Among them, the processor 301 is used to control the overall operation of the electronic device 300 to complete all or part of the steps in the above web page layout method; the memory 302 is used to store various types of data to support the operation of the electronic device 300. These data may include, for example, instructions for any application or method operating on the electronic device 300, as well as application-related data. The memory 302 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, a magnetic disk, or an optical disc.

[0231] The I / O interface 303 provides an interface between the processor 301 and other interface modules. The above other interface modules can be a keyboard, a mouse, buttons, etc. These buttons can be virtual buttons or physical buttons. The communication component 304 is used to test the wired or wireless communication between the electronic device 300 and other devices. Wireless communication, such as Wi-Fi, Bluetooth, near field communication (NFC), 2G, 3G, or 4G, or a combination of one or more of them. Therefore, the corresponding communication component 304 may include: a Wi-Fi component, a Bluetooth component, and an NFC component.

[0232] The communication bus 305 may include a path for transmitting information between the above components. The communication bus 305 can be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus, etc. The communication bus 305 can be divided into an address bus, a data bus, a control bus, etc.

[0233] The electronic device 300 may include, but is not limited to, mobile terminals such as digital broadcast receivers, PDAs (Personal Digital Assistants), PMPs (Portable Multimedia Players), etc., and fixed terminals such as digital TVs, desktop computers, etc., and may also be a server or the like.

[0234] The computer-readable storage medium provided by the embodiments of the present application will be introduced below. The computer-readable storage medium described below can be correspondingly referred to the web page layout method described above.

[0235] The present application also provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of the above-mentioned web page layout method are implemented.

[0236] The computer-readable storage medium may include: various media that can store program codes such as USB flash drives, mobile hard disks, read-only memories (ROMs), random access memories (RAMs), magnetic disks, or optical discs.

[0237] The term "including", "comprising" or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements not only includes those elements, but also includes other elements not expressly listed, or further includes elements inherent to such process, method, article or device.

[0238] The above description is only a preferred embodiment of the present application and an explanation of the applied technical principles. Those skilled in the art should understand that the scope of the application involved in the present application is not limited to the technical solution formed by the specific combination of the above technical features, and should also cover other technical solutions formed by any combination of the above technical features or their equivalent features without departing from the foregoing application concept. For example, a technical solution formed by mutually replacing the above features with technical features having similar functions (but not limited to) applied in the present application.< / article> < / section> < / h6>

Claims

1. A web page layout method, characterized in that, Including: Obtain the access request of the user for the target web page on the current page; In response to the access request, determine the target page layout and target page structure corresponding to the target web page according to the screen width size of the browser corresponding to the current page, the pre-configured CSS file and HTML file, wherein different screen width sizes corresponding page layouts are pre-configured in the CSS file, different screen width sizes corresponding page structures are pre-configured in the HTML file, the page layout represents the arrangement and combination mode of each element in the web page, and the page structure represents the hierarchical relationship of the content in the web page; According to the target page layout and target page structure, display the target web page on the current page through the browser; The CSS file includes global variables, row attributes, column attributes, grid layout modes, preset response sizes, and hidden classes corresponding to breakpoints corresponding to different screen width sizes; the HTML file includes element types, element attributes, element hierarchical relationships, or local variables corresponding to different screen width sizes; The global variables include the width of each row of the grid system, the number of grids in a row, the interval between columns, the layout mode of the row, the layout mode of the row in the flex layout mode, and the moving mode of the column; The row attributes include the overall layout and style of the row; The column attributes include the overall layout and style of the column; The grid layout modes include normal layout, mixed layout, and responsive layout; The preset response size and the hidden class corresponding to the breakpoint are the grids corresponding to the class for setting the hiding or displaying of specific elements according to the preset response size; The element type represents the page structure corresponding to different screen width sizes; The element attributes represent the appearance and response mode of the elements corresponding to different screen width sizes, and the response mode represents the display attributes of the elements; The element hierarchical relationship represents the hierarchical relationship of the elements corresponding to different screen width sizes in the corresponding page structure; The local variables include the width of any one or more rows, the number of grids in a row, the interval between columns, the layout mode of the row, the layout mode of the row in the flex layout mode, and the moving mode of the column; The determining the target page layout and target page structure corresponding to the target web page according to the screen width size of the browser corresponding to the current page, the pre-configured CSS file and HTML file includes: Detect whether there are local variables in the HTML file; If there are local variables in the HTML file, then based on the priority of the preset local variables, overwrite the corresponding content in the global variables with the content in the local variables to form new variable information; Based on the screen width size of the browser corresponding to the current page, the new variable information, the row attributes, the column attributes, the grid layout mode, and the preset response size and the hidden class corresponding to the breakpoint, determine the target page layout corresponding to the target web page; Determine the target page structure corresponding to the target web page based on the screen width dimension of the browser corresponding to the current page, the element type, the element attributes, and the element hierarchy relationship; If local variables are not defined in the HTML file, determine the target page layout corresponding to the target web page based on the screen width dimension of the browser corresponding to the current page, the global variables, the attributes of the rows, the attributes of the columns, the grid layout method, the preset responsive dimensions, and the hidden classes for the corresponding breakpoints.

2. The web page layout method according to claim 1, wherein, After displaying the target web page on the current page through the browser according to the target page layout and target page structure, it further includes: When the window size of the browser changes, re-obtain the screen width dimension of the browser corresponding to the current page to obtain a new screen width dimension; Determine the new target page layout and new target page structure corresponding to the current target web page according to the new screen width dimension, the CSS file, and the HTML file; Display the target web page on the current page through the browser according to the new target page layout and the new target page structure.

3. A web page layout method according to claim 1, characterized in that The displaying the target web page on the current page through the browser according to the target page layout and target page structure includes: Perform responsive breakpoint detection according to the screen width dimension of the browser corresponding to the current page and the preset responsive dimensions to obtain the display level of the page layout; Based on the display level, determine the grid hidden classes and grid dimensions of the current page in the CSS file; Render the elements to be displayed in each grid based on the grid hidden classes, grid dimensions, the target page layout, and target page structure to implement the display of the target web page.

4. A web page layout method according to claim 3, characterized in that, The performing responsive breakpoint detection according to the screen width dimension of the browser corresponding to the current page and the preset responsive dimensions to obtain the display level includes: When the screen width dimension information is less than 768px, the display level of the current window of the browser is the first size level; When the screen width dimension information is not less than 768px and less than 992px, the current window of the browser obtains the display level as the second size level; When the screen width dimension information is not less than 992px and less than 1200px, the current window of the browser obtains the display level as the third size level; When the screen width dimension information is not less than 1200px and less than 1920px, the current window of the browser obtains the display level as the fourth size level; When the screen width dimension information is not less than 1920px, the current window of the browser obtains the display level as the fifth size level; Among them, the screen width size information corresponding to the first size level is smaller than the screen width size information corresponding to the second size level, the screen width size information corresponding to the second size level is smaller than the screen width size information corresponding to the third size level, the screen width size information corresponding to the third size level is smaller than the screen width size information corresponding to the fourth size level, and the screen width size information corresponding to the fourth size level is smaller than the screen width size information corresponding to the fifth size level.

5. A web page layout device, characterized in that, Including: An acquisition module, configured to acquire an access request of a user for a target web page on the current page; A response module, configured to, in response to the access request, determine a target page layout and a target page structure corresponding to the target web page according to the screen width size of the browser corresponding to the current page, a pre-configured CSS file, and an HTML file, where different page layouts corresponding to different screen width sizes are pre-configured in the CSS file, and different page structures corresponding to different screen width sizes are pre-configured in the HTML file. The page layout represents the arrangement and combination manner of each element in the web page, and the page structure represents the hierarchical relationship of the content in the web page; A display module, configured to display the target web page on the current page through the browser according to the target page layout and the target page structure; The CSS file includes global variables, row attributes, column attributes, grid layout methods, preset response sizes, and hidden classes corresponding to breakpoints corresponding to different screen width sizes; the HTML file includes element types, element attributes, element hierarchical relationships, or local variables corresponding to different screen width sizes; The global variables include the width of each row of the grid system, the number of grids in a row, the interval between columns, the layout method of the row, the layout method of the row in the flex layout mode, and the moving method of the column; The row attributes include the overall layout and style of the row; The column attributes include the overall layout and style of the column; The grid layout methods include normal layout, mixed layout, and responsive layout; The preset response size and the hidden class corresponding to the breakpoint are grids corresponding to classes for setting to hide or display specific elements according to the preset response size; The element type represents the page structure corresponding to different screen width sizes; The element attributes represent the appearance and response method of the element corresponding to different screen width sizes, and the response method represents the display attribute of the element; The element hierarchical relationship represents the hierarchical relationship of elements corresponding to different screen width sizes in the corresponding page structure; The local variables include the width of any one or more rows, the number of grids in a row, the interval between columns, the layout method of the row, the layout method of the row in the flex layout mode, and the moving method of the column; The response module is specifically configured to: Detect whether there are local variables in the HTML file; If there are local variables in the HTML file, then based on the priority of the preset local variables, cover the content in the local variables with the corresponding content in the global variables to form new variable information; Determine the target page layout corresponding to the target web page based on the screen width dimension of the browser corresponding to the current page, the new variable information, the attributes of the row, the attributes of the column, the grid layout mode, the preset response dimension, and the hidden class corresponding to the breakpoint; Determine the target page structure corresponding to the target web page based on the screen width dimension of the browser corresponding to the current page, the element type, the element attributes, and the element hierarchy relationship; If the local variable is not defined in the HTML file, determine the target page layout corresponding to the target web page based on the screen width dimension of the browser corresponding to the current page, the global variable, the attributes of the row, the attributes of the column, the grid layout mode, the preset response dimension, and the hidden class corresponding to the breakpoint.

6. An electronic device, characterized in that, Comprising a processor, the processor being coupled to a memory; The processor is configured to execute a computer program stored in the memory, so that the electronic device executes the method according to any one of claims 1 to 4.

7. A computer-readable storage medium, characterized in that, Comprising a computer program or instruction, when the computer program or instruction runs on a computer, the computer is caused to execute the method according to any one of claims 1-4.

Images