Cross-terminal responsive design system and method based on Grid

Abstract

The present invention discloses a cross-terminal responsive design system and method based on Grid, and relates to the technical field of web page responsive design, including a cross-terminal responsive design platform, wherein the cross-terminal responsive design platform is communicatively connected with a device detection and identification module, a Grid layout design module, a breakpoint management module, a content adaptive adjustment module, a dynamic content management module, and a feedback module, wherein the modules are connected by electrical signals; the device detection and identification module is used to detect and obtain characteristic information of the screen size, resolution, operating system, and browser type of the access device; the Grid layout design module is used to design a web page layout framework based on CSS Grid. The present invention ensures that web page content is displayed in the most optimized way under different devices and screen sizes by using CSS Grid, and automatically adapts to various screen sizes and resolutions through predefined grid structures and flexible responsive rules, providing users with a consistent and smooth visual experience.

Description

Technical Field

[0001] The present invention relates to the technical field of web page responsive design, and in particular to a cross-terminal responsive design system and method based on Grid. Background Art

[0002] With the development of technology, users access web pages through increasingly diverse devices, including desktop computers, tablets, and smart phones. These devices have significant differences in screen size, resolution, and interaction methods. Therefore, the traditional fixed layout method can no longer meet the needs. In order to ensure that users can have a good browsing experience on different devices, a design method that can automatically adapt to screen size and characteristics is required. Responsive design provides users with a unified access experience by automatically adjusting layout and style, thereby improving user satisfaction and retention rate. Grid layout is a two-dimensional layout system that divides the page into rows and columns and allows elements to be positioned in these rows and columns in a flexible way. Grid layout can easily achieve responsive layout by defining the properties of grid containers and grid items.

[0003] For example, a progressively enhanced responsive web design method with Chinese patent publication number: CN103500166A relates to the field of Internet web design. The invention can adapt to different devices, match website layout and content with device characteristics, improve website performance and enhance user experience.

[0004] Although the Grid layout in CSS3 provides powerful layout capabilities, when implementing responsive design, for some dynamic content or user-generated content, it is necessary to find a balance between fixed layout and fluid layout. An overly fluid layout may lose professionalism on a large screen, while an overly fixed layout may be difficult to operate on a small screen. Therefore, how to ensure that the design content can maintain a suitable display effect on different screen sizes, automatically adapt to the Grid layout and maintain good readability is the problem we need to solve. To this end, a cross-terminal responsive design system and method based on Grid is proposed. Summary of the invention

[0005] The purpose of the present invention is to provide a cross-terminal responsive design system and method based on Grid to solve the problems raised in the above background technology.

[0006] In order to solve the above technical problems, the technical solution adopted by the present invention is:

[0007] In a first aspect, a cross-terminal responsive design system based on Grid includes a cross-terminal responsive design platform, wherein the cross-terminal responsive design platform is communicatively connected with a device detection and identification module, a Grid layout design module, a breakpoint management module, a content adaptive adjustment module, a dynamic content management module, and a feedback module, wherein electrical signals are connected between the modules;

[0008] The device detection and identification module is used to detect and obtain characteristic information of the screen size, resolution, operating system and browser type of the access device, provide basic data support for subsequent responsive layout and content adjustment, and ensure that the system can accurately identify and adapt to different devices;

[0009] The Grid layout design module is used to design a web page layout framework based on CSS Grid, including defining grid containers, grid rows and columns, providing flexible and powerful layout capabilities, supporting complex page layout design, while maintaining the simplicity and maintainability of the code;

[0010] The breakpoint management module is used to set breakpoints under different screen sizes according to the feature information of the device detection and identification module to determine the CSS rule set for the screen size range, so as to ensure that the web page can automatically switch to the most suitable layout style under different screen sizes to improve the user experience;

[0011] The content adaptive adjustment module is used to analyze the state of the web page according to the Grid layout and breakpoint settings, and adaptively adjust the size, arrangement and display mode of the web page content according to the analysis results to maintain the readability and professionalism of the content under different screen sizes and avoid the problem of content being cropped or incompletely displayed;

[0012] The dynamic content management module manages dynamic content or user-generated content, defines responsive CSS rules for different types of content to ensure that they can be displayed correctly on different devices, provides flexible layout adjustment strategies, enhances the flexibility and scalability of the system, and supports more diverse content display requirements;

[0013] The feedback module is used to collect test data on different devices and browsers, collect user feedback, continuously optimize and improve the system, ensure that the system can run stably and reliably, and continuously improve user experience and satisfaction based on user feedback.

[0014] A further improvement of the technical solution of the present invention is that in the device detection and identification module, the process of acquiring the characteristic information is as follows:

[0015] The device detection and identification module automatically captures and analyzes the characteristic information of the access device by combining front-end technology with back-end services. The characteristic information of the access device is used to determine the type, size and performance of the device so that the system can select the most appropriate layout and style to present the web page content;

[0016] When a user visits a web page, the device detection and identification module is activated, and the initialization detection process is executed to collect the screen size and resolution, identify the operating system, and detect the browser type and version information. Among them, the window.innerWidth and window.innerHeight in JavaScript are used to obtain the viewport size of the device, the screen resolution is obtained through window.screen.width and window.screen.height, the user agent string of the browser is obtained through navigator.userAgent, and the operating system information is parsed therein. Navigator.userAgent is used to parse the user agent string to identify the browser type and version;

[0017] Use feature detection to evaluate the CSS properties and HTML features supported by the browser, avoid relying directly on the user agent string, and use media queries in CSS to detect device features so that different styles can be applied to different device features. Use JavaScript to test whether the browser supports specific CSS properties or features, such as Flexbox, Grid layout, etc. Implement HTML feature detection to detect whether the browser supports certain HTML5 features, such as new form input types or semantic tags;

[0018] The collected device information is transmitted to the cross-terminal responsive design platform in the form of electrical signals for further processing, and the collected data is analyzed in combination with the characteristic information of the access device to determine the category to which the device belongs;

[0019] According to the analysis results, a configuration file covering the current device characteristics is generated, which contains settings and parameters for responsive design, and the settings in the configuration file are applied to the Grid layout design module to trigger corresponding CSS rules and Grid layout adjustments.

[0020] A further improvement of the technical solution of the present invention is that in the Grid layout design module, the process of designing a CSSGrid-based web page layout framework is as follows:

[0021] Clarify the page layout requirements, including content structure, design goals, and responsive behavior, use HTML elements as grid containers for CSS Grid layout, and mark all direct child elements inside the grid container as grid items;

[0022] Based on the needs of the page layout, use the grid-template-rows and grid-template-columns properties to define the size of the grid container's rows and columns, and use grid line naming to define semantically meaningful grid template layout areas through grid-template-areas;

[0023] Use the grid-gap, row-gap, and column-gap properties to configure the gaps between grid items, and use the justify-items, align-items, justify-content, and align-content properties to control the horizontal and vertical alignment of grid items. Use media queries to adjust the grid layout according to different screen sizes, and set different grid-template-rows and grid-template-columns values ​​for different breakpoints to achieve responsive changes in the layout.

[0024] Create a sub-grid layout inside the grid container of the CSS Grid layout to nest layouts and achieve a more complex layout structure.

[0025] A further improvement of the technical solution of the present invention is that: in the breakpoint management module, the process of determining the screen size range CSS rule set is:

[0026] Receive the characteristic information of the access device collected by the device detection and identification module, store it in the data warehouse, and perform association analysis based on the acquired characteristic information of the access device to determine the screen size range to which the current device belongs. The characteristic information includes but is not limited to screen size, resolution, pixel ratio, device type (such as mobile phone, tablet, desktop), operating system, etc.;

[0027] Compare with the preset breakpoint values, use CSS media queries to define style rules at different breakpoints, and determine the CSS rules required to render the web page;

[0028] According to the screen size range of the current device, determine the CSS rule set that matches it, apply the selected CSS rule set to the web page, and adjust the layout and style of the web page. In the CSS and related configuration files, a series of breakpoint values ​​need to be predefined, such as 600px, 900px, 1200px, etc. The breakpoint values ​​represent the dividing points of different screen sizes. Each breakpoint corresponds to a set of CSS rules for controlling the layout and style of the web page within the screen size range.

[0029] As the CSS rule set is switched, the components and elements in the web page automatically adjust their size and arrangement to match the new CSS rule set, and adjust the Grid layout at the breakpoints, using the grid-template-columns and grid-template-rows properties of CSS Grid to adapt to the display requirements of different screen sizes.

[0030] A further improvement of the technical solution of the present invention is that: in the content adaptive adjustment module, the process of adaptively adjusting the size, arrangement and display mode of the webpage content is as follows:

[0031] Based on the Grid layout and breakpoint settings, combined with the CSS rule set for the screen size range determined by the breakpoint management module, analyze the current state of the web page, including the screen size width, the size of the web page content, and the basic width information of the web page;

[0032] Extract the current state information of the web page, construct an adaptive evaluation index, and measure and analyze the adaptability of the web page under the current screen size. The higher the adaptive evaluation index value, the better the adaptability of the web page under the current screen size.

[0033] According to the analysis results of the adaptive evaluation index, combined with the screen size and breakpoint settings, use CSS media queries to adjust the text size, image size and content arrangement to adapt to the screen size, ensure that the content does not exceed the screen range, and maintain appropriate reading spacing and visual effects. Adjust the arrangement order and position of content elements to adapt to different grid layouts, use the properties of CSS Grid and Flexbox to rearrange the content, optimize the reading flow and visual hierarchy, and ensure that the content logic is clear. For example, stacked arrangement may be used on small-screen devices, while side-by-side arrangement may be used on large-screen devices;

[0034] For content that is not suitable for the current screen size, choose the corresponding display method according to the content type and screen size. For long text content, use a scroll bar to display the remaining content on small-screen devices. For pictures and chart visual elements, scale or crop them to adapt to the screen size. Use max-width: 100%; and height: auto; to ensure that pictures and videos are scaled correctly on different devices.

[0035] A further improvement of the technical solution of the present invention is that the expression of the adaptive evaluation index is: in, It is the adaptive evaluation index, which is used to measure the adaptability of a web page under the current screen size. is the base width of the web page, in pixels. is the current size of the web page content, in pixels. is the maximum acceptable size of the content, in pixels, is the minimum acceptable size of the content, in pixels, is the width of the current screen size in pixels. The width of the maximum screen size, indicating the preset maximum value in pixels.

[0036] A further improvement of the technical solution of the present invention is that: in the dynamic content management module, the process of defining responsive CSS rules for different types of content is:

[0037] Identify and retrieve dynamic and user-generated content on web pages from different sources (user input, external data sources, or APIs), and classify and store the content based on the content form, such as text, images, and videos, so that different responsive strategies can be applied;

[0038] Parse the stored content and extract key information (such as title, text, tags, timestamp, etc.) for further processing and display, and format the content to unify the storage format of the content;

[0039] Analyze dynamic content and user-generated content on web pages, divide the content into different content segments, and determine the width of each content segment. Combine the viewport width and screen size to obtain the responsiveness coefficient, adjust the adaptability under different screen sizes, and define responsive CSS rules for different types of content to ensure that they can be displayed correctly under different screen sizes.

[0040] Use JavaScript or CSS to dynamically calculate and adjust the layout of dynamically loaded and user-generated content areas, and adapt and optimize the content. Dynamically adjust text size and line spacing according to screen size to ensure readability. Use max-width: 100%; and height: auto; ensure that media elements adapt to the screen to implement image and video processing, dynamic loading, and on-demand loading technology to reduce the amount of content when the page is first loaded.

[0041] A further improvement of the technical solution of the present invention is that the expression of the response coefficient is: in, The responsiveness factor measures the adaptability and weight distribution of content on different screen sizes. is a global proportional constant used to adjust the overall responsiveness weight, For the The width of the content fragment, is the total number of content fragments, is the base of natural logarithms, approximately equal to 2.71828, is the width of the current viewport, is the standard viewport width, used as a baseline for comparison. express and The proportion of is the width of the maximum screen size, The width of the smallest screen size.

[0042] Second, a Grid-based cross-terminal responsive design method is implemented based on a Grid-based cross-terminal responsive design system, including the following steps:

[0043] Step 1: clarify the goals and content structure of web page design, use the device detection and recognition module to collect feature information of access devices, and identify dynamic content and user-generated content in the web page;

[0044] Step 2: Define the grid container, grid rows, and columns of the CSS Grid layout, set breakpoints for different screen sizes based on the feature information of the device detection and recognition module, and analyze the CSS rule set for the screen size range;

[0045] Step 3, based on the Grid layout, breakpoint settings, and the CSS rule set for the determined screen size range, extract the web page status information, construct an adaptive evaluation index, and measure and analyze the adaptability of the web page under the corresponding screen size;

[0046] Step 4: Classify and store dynamic content and user-generated content, extract key information, obtain responsiveness coefficients, adjust adaptability under different screen sizes, and define responsive CSS rules for different types of content;

[0047] Step 5: Test on different devices and screen sizes to ensure the correctness and consistency of the responsive design, collect user feedback, analyze the layout and content display, and continuously optimize based on the test analysis results to iteratively improve the design and functionality.

[0048] Due to the adoption of the above technical solution, the present invention has the following technical advances compared with the prior art:

[0049] 1. The present invention provides a cross-terminal responsive design system and method based on Grid. By using CSS Grid, web page content is displayed in the most optimized way on different devices and screen sizes. Through predefined grid structure and flexible responsive rules, it automatically adapts to various screen sizes and resolutions to provide users with a consistent and smooth visual experience. The cross-terminal responsive design using Grid layout can significantly improve development efficiency and maintainability. In addition, the Grid layout also has good scalability and reusability. By defining a standard grid system and responsive rules, it can be reused in different projects, reducing duplication of work and error rate.

[0050] 2. The present invention provides a cross-terminal responsive design system and method based on Grid. By defining different grid areas and row and column sizes, the web page layout can be conveniently adjusted to adapt to different types of content and device requirements, further enhancing the adaptability and flexibility of the web page. Moreover, by using CSS Grid and media queries, the web page can dynamically adjust the layout according to the device size, thereby reducing unnecessary content rendering and layout calculations, which helps to optimize the loading speed and performance of the web page. BRIEF DESCRIPTION OF THE DRAWINGS

[0051] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in the present invention. For ordinary technicians in this field, other drawings can also be obtained based on these drawings.

[0052] Figure 1 It is a module diagram of the present invention;

[0053] Figure 2 A flow chart of the present invention for adaptively adjusting the size, arrangement and display of web page content;

[0054] Figure 3 A flowchart of the present invention for defining responsive CSS rules for different types of content;

[0055] Figure 4 The figure is a flow chart of the method of the present invention. DETAILED DESCRIPTION

[0056] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0057] Embodiment 1, as Figure 1 , Figure 2 As shown, the present invention provides a cross-terminal responsive design system based on Grid, including a cross-terminal responsive design platform, the cross-terminal responsive design platform is communicatively connected with a device detection and identification module, a Grid layout design module, a breakpoint management module, a content adaptive adjustment module, a dynamic content management module and a feedback module, wherein the modules are connected by electrical signals;

[0058] The device detection and identification module is used to detect and obtain the characteristic information of the screen size, resolution, operating system and browser type of the access device, provide basic data support for subsequent responsive layout and content adjustment, and ensure that the system can accurately identify and adapt to different devices. The device detection and identification module combines front-end technology with back-end services to automatically capture and analyze the characteristic information of the access device. The characteristic information of the access device is used to determine the type, size and performance of the device so that the system can select the most appropriate layout and style to present the web page content. When a user visits a web page, the device detection and identification module is activated and the initialization detection process is executed to collect the screen size and resolution, identify the operating system, and detect the browser type and version information. Among them, the window.innerWidth and window.innerHeight in JavaScript are used to obtain the viewport size of the device, the screen resolution is obtained through window.screen.width and window.screen.height, the user agent string of the browser is obtained through navigator.userAgent, and the browser is decoded. Analyze the operating system information, use navigator.userAgent to parse the user agent string to identify the browser type and version, use feature detection to evaluate the CSS properties and HTML features supported by the browser, avoid relying directly on the user agent string, and use media queries in CSS to detect device features so that different styles can be applied to different device features. Use JavaScript to test whether the browser supports specific CSS properties or features, such as Flexbox, Grid layout, etc. Implement HTML feature detection to detect whether the browser supports certain HTML5 features, such as new form input types or semantic tags. Transmit the collected device information in the form of electrical signals to the cross-terminal responsive design platform for further processing, and analyze the collected data in combination with the characteristic information of the access device to determine the category to which the device belongs. Based on the analysis results, generate a configuration file covering the current device features, which contains settings and parameters for responsive design, and apply the settings in the configuration file to the Grid layout design module to trigger the corresponding CSS rules and Grid layout adjustments;

[0059] Grid layout design module, used to design web page layout framework based on CSS Grid, including defining grid container, grid rows and columns, providing flexible and powerful layout capabilities, supporting complex page layout design, while keeping the code concise and maintainable, clarifying the requirements of page layout, including content structure, design goals and responsive behavior, using HTML elements as grid containers for CSS Grid layout, and marking all direct child elements inside the grid container as grid items. Based on the requirements of page layout, use grid-template-rows and grid-template-columns properties to define the size of rows and columns of grid containers, and use grid line naming to define semantically meaningful grid template layout areas through grid-template-areas;

[0060] Use the grid-gap, row-gap, and column-gap properties to configure the gaps between grid items, and use the justify-items, align-items, justify-content, and align-content properties to control the horizontal and vertical alignment of grid items. Use media queries to adjust the grid layout according to different screen sizes, set different grid-template-rows and grid-template-columns values ​​for different breakpoints to achieve responsive changes in layout, create child grid layouts inside the grid container of the CSS Grid layout, nest layouts, and achieve more complex layout structures;

[0061] The breakpoint management module is used to set breakpoints under different screen sizes according to the characteristic information of the device detection and identification module, so as to determine the CSS rule set of the screen size range, ensure that the web page can automatically switch to the most appropriate layout style under different screen sizes, improve the user experience, receive the characteristic information of the access device collected by the device detection and identification module, store it in the data warehouse, and perform correlation analysis based on the acquired characteristic information of the access device to determine the screen size range to which the current device belongs. The characteristic information includes but is not limited to screen size, resolution, pixel ratio, device type (such as mobile phone, tablet, desktop), operating system, etc., compares it with the preset breakpoint value, and uses CSS media query to define the breakpoints under different breakpoints. Style rules, determine the CSS rules required for rendering the web page, determine the matching CSS rule set according to the screen size range of the current device, apply the selected CSS rule set to the web page, and adjust the layout and style of the web page. In CSS and related configuration files, a series of breakpoint values, such as 600px, 900px, 1200px, etc., need to be predefined. The breakpoint value represents the dividing point of different screen sizes. Each breakpoint corresponds to a set of CSS rules for controlling the layout and style of the web page within the screen size range. With the switching of the CSS rule set, the components and elements in the web page automatically adjust the size and arrangement to match the new CSS rule set, and adjust the Grid layout at the breakpoint, using the grid-template-columns and grid-template-rows properties of CSS Grid to adapt to the display requirements of different screen sizes;

[0062] The content adaptive adjustment module is used to analyze the state of the web page according to the Grid layout and breakpoint settings, and adaptively adjust the size, arrangement and display mode of the web page content according to the analysis results, so as to maintain the readability and professionalism of the content under different screen sizes and avoid the problem of content being cropped or incompletely displayed. Based on the Grid layout and breakpoint settings, combined with the CSS rule set of the screen size range determined by the breakpoint management module, the current state of the web page is analyzed, including the screen size width, the size of the web page content, and the basic width information of the web page. The current state information of the web page is extracted, and an adaptive evaluation index is constructed to measure and analyze the adaptability of the web page under the current screen size. The higher the adaptive evaluation index value, the better the adaptability of the web page under the current screen size. According to the analysis results of the adaptive evaluation index, combined with the screen size and breakpoint settings, CSS media queries are used to adjust the text size, image size and content arrangement to adapt to the screen size, ensure that the content does not exceed the screen range, and maintain appropriate reading spacing and visual effects. The arrangement order and position of content elements are adjusted to adapt to different grid layouts using CSS The properties of Grid and Flexbox are used to rearrange the content, optimize the reading flow and visual hierarchy, and ensure the content logic is clear. For example, stacking may be used on small-screen devices, while side-by-side arrangement may be used on large-screen devices. For content that is not suitable for the current screen size, the corresponding display method is selected according to the content type and screen size. For long text content, a scroll bar is used on small-screen devices to display the remaining content. For pictures and chart visual elements, scaling or cropping is used to adapt to the screen size, using max-width: 100%; and height: auto; ensuring that pictures and videos are scaled correctly on different devices;

[0063] Furthermore, the expression of the adaptive evaluation index is: in, It is the adaptive evaluation index, which is used to measure the adaptability of a web page under the current screen size. is the base width of the web page, in pixels. is the current size of the web page content, in pixels. is the maximum acceptable size of the content, in pixels, is the minimum acceptable size of the content, in pixels, is the width of the current screen size in pixels. is the width of the maximum screen size, indicating the preset maximum value in pixels. It should be noted that A low value of indicates that the web page is less adaptive. A high value of indicates good adaptability. The value is determined by the actual width of the web page. The value is adjusted according to the actual content size and should be between and between, The value is determined according to the current device screen width and should be less than or equal to ,according to The value of evaluates the adaptability of web page content. If the value is low, you need to increase the content size or adjust the layout to improve adaptivity. A high value indicates that the web page content has been well adapted to the current screen size. The value indicates that adjustment is needed and the corresponding CSS rules are automatically applied, such as increasing or decreasing font size, adjusting margins, changing element arrangement, etc. The dynamic content management module manages dynamic content or user-generated content, defines responsive CSS rules for different types of content, ensures that they can be displayed correctly on different devices, provides flexible layout adjustment strategies, enhances the flexibility and scalability of the system, and supports more diverse content display needs;

[0064] The feedback module is used to collect test data on different devices and browsers, compile user feedback, and continuously optimize and improve the system to ensure that the system can run stably and reliably, while continuously improving user experience and satisfaction based on user feedback.

[0065] Embodiment 2, as Figure 3 As shown, based on Example 1, the present invention provides a technical solution: Preferably, in the dynamic content management module, the process of defining responsive CSS rules for different types of content is:

[0066] Identify and obtain dynamic content and user-generated content in web pages from different sources (user input, external data sources or APIs), classify and store the content according to the content form so as to apply different responsive strategies. The content form is divided into text, image, and video. Parse the stored content and extract key information (such as title, body, tags, timestamp, etc.) for further processing and display. Format the content and unify the storage format of the content. Analyze the dynamic content and user-generated content in the web page, divide the content into different content segments, determine the width of each content segment, and obtain the content based on the viewport width and screen size. Take the responsiveness factor, adjust the adaptability under different screen sizes, define responsive CSS rules for different types of content, ensure that they can be displayed correctly under different screen sizes, use JavaScript or CSS to dynamically calculate and adjust the layout of dynamically loaded and user-generated content areas, and adapt and optimize the content, dynamically adjust the text size and line spacing according to the screen size to ensure readability, use max-width: 100%; and height: auto; ensure that media elements adapt to the screen to implement image and video processing, perform dynamic loading, implement on-demand loading technology, and reduce the amount of content when the page is first loaded;

[0067] Furthermore, the expression of the response coefficient is: in, The responsiveness factor measures the adaptability and weight distribution of content on different screen sizes. is a global proportional constant used to adjust the overall responsiveness weight, For the The width of the content fragment, is the total number of content fragments, is the base of natural logarithms, approximately equal to 2.71828, is the width of the current viewport, is the standard viewport width, used as a baseline for comparison. express and The proportion of is the width of the maximum screen size, is the width of the smallest screen size. It should be noted that the sum of the widths of all content fragments is calculated, combined with the global proportional constant , determine the basic responsive weight, using an exponential function Adjust the adaptability under different screen sizes. As the screen size increases, the adaptability will decrease. By calculating and The square root of , introduces adjustment factors related to the screen size range to take into account the display requirements of different screen sizes, and the final The value affects the formulation of CSS rules, such as breakpoint settings in media queries, font size, margins, padding, etc. value, dynamically adjust CSS rules, if If the value is high, you need to set a smaller font size, a more compact layout, or hide some non-critical content in CSS. Lower values ​​increase the font size, margins, or display more content.

[0068] Embodiment 3, as Figure 4 As shown, based on Embodiments 1-2, the present invention further provides a Grid-based cross-terminal responsive design method, which is implemented based on a Grid-based cross-terminal responsive design system and includes the following steps:

[0069] Step 1: clarify the goals and content structure of web page design, use the device detection and recognition module to collect feature information of access devices, and identify dynamic content and user-generated content in the web page;

[0070] Step 2: Define the grid container, grid rows, and columns of the CSS Grid layout, set breakpoints for different screen sizes based on the feature information of the device detection and recognition module, and analyze the CSS rule set for the screen size range;

[0071] Step 3, based on the Grid layout, breakpoint settings, and the CSS rule set for the determined screen size range, extract the web page status information, construct an adaptive evaluation index, and measure and analyze the adaptability of the web page under the corresponding screen size;

[0072] Step 4: Classify and store dynamic content and user-generated content, extract key information, obtain responsiveness coefficients, adjust adaptability under different screen sizes, and define responsive CSS rules for different types of content;

[0073] Step 5: Test on different devices and screen sizes to ensure the correctness and consistency of the responsive design, collect user feedback, analyze the layout and content display, and continuously optimize based on the test analysis results to iteratively improve the design and functionality.

[0074] Among them, Css: Cascading Style Sheets; Grid: Grid Layout.

[0075] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A cross-terminal responsive design system based on Grid, including a cross-terminal responsive design platform, characterized by: The cross-terminal responsive design platform is communicatively connected with a device detection and identification module, a Grid layout design module, a breakpoint management module, a content adaptive adjustment module, a dynamic content management module and a feedback module, wherein electrical signals are connected between the modules; The device detection and identification module is used to detect and obtain characteristic information of the screen size, resolution, operating system and browser type of the access device; The Grid layout design module is used to design a web page layout framework based on CSS Grid, including defining grid containers, grid rows and columns; The breakpoint management module is used to set breakpoints under different screen sizes according to the feature information of the device detection and identification module to determine the CSS rule set for the screen size range; The content adaptive adjustment module is used to analyze the state of the web page according to the Grid layout and breakpoint settings, and adaptively adjust the size, arrangement and display mode of the web page content according to the analysis results; The dynamic content management module manages dynamic content or user-generated content, defines responsive CSS rules for different types of content, and provides layout adjustment strategies; The feedback module is used to collect test data on different devices and browsers, collect user feedback, and continuously optimize and improve the system.

2. The Grid-based cross-terminal responsive design system according to claim 1, characterized in that: In the device detection and identification module, the process of acquiring feature information is as follows: The device detection and identification module automatically captures and analyzes the characteristic information of the access device by combining the front-end technology with the back-end service. The characteristic information of the access device is used to determine the type, size and performance of the device. When a user visits a web page, the device detection and identification module is activated, and the initialization detection process is performed to collect the screen size and resolution, identify the operating system, and detect the browser type and version information; Use feature detection to evaluate browser support for CSS properties and HTML features, and use media queries in CSS to detect device features. Implement HTML feature detection to detect whether the browser supports certain HTML5 features. The collected device information is transmitted to the cross-terminal responsive design platform in the form of electrical signals, and the collected data is analyzed in combination with the characteristic information of the access device to determine the category to which the device belongs; Based on the analysis results, a configuration file covering the characteristics of the current device is generated, and the settings in the configuration file are applied to the Grid layout design module to trigger corresponding CSS rules and Grid layout adjustments.

3. The Grid-based cross-terminal responsive design system according to claim 2, characterized in that: In the Grid layout design module, the process of designing a CSS Grid-based web page layout framework is as follows: Clarify the page layout requirements, including content structure, design goals, and responsive behavior, use HTML elements as grid containers for CSS Grid layout, and mark all direct child elements inside the grid container as grid items; Based on the requirements of page layout, define the row and column sizes of the grid container, and use grid line naming to define semantically meaningful grid template layout areas; Configure the gaps between grid items and control the horizontal and vertical alignment of grid items. Use media queries to adjust the grid layout according to different screen sizes to achieve responsive layout changes. Create a sub-grid layout inside the grid container of the CSS Grid layout to nest the layout.

4. The Grid-based cross-terminal responsive design system according to claim 3, characterized in that: In the breakpoint management module, the process of determining the screen size range CSS rule set is as follows: The characteristic information of the access device collected by the receiving device detection and identification module is stored in the data warehouse, and based on the acquired characteristic information of the access device, a correlation analysis is performed to determine the screen size range to which the current device belongs; Compare with the preset breakpoint values, use CSS media queries to define style rules at different breakpoints, and determine the CSS rules required to render the web page; According to the screen size range of the current device, determine the CSS rule set that matches it, apply the selected CSS rule set to the web page, and adjust the layout and style of the web page; As the CSS rule set is switched, the components and elements in the web page automatically adjust their size and arrangement to match the new CSS rule set, and adjust the Grid layout at the breakpoints to adapt to the display requirements of different screen sizes.

5. The Grid-based cross-terminal responsive design system according to claim 4, characterized in that: In the content adaptive adjustment module, the process of adaptively adjusting the size, arrangement and display mode of web page content is as follows: Based on the Grid layout and breakpoint settings, combined with the CSS rule set for the screen size range determined by the breakpoint management module, analyze the current state of the web page, including the screen size width, the size of the web page content, and the basic width information of the web page; Extract the current status information of the web page, construct an adaptive evaluation index, and measure and analyze the adaptability of the web page under the current screen size; Based on the analysis results of the adaptive evaluation index, combined with the screen size and breakpoint settings, use CSS media queries to adjust text size, image size, and content arrangement to adapt to the screen size, and adjust the arrangement order and position of content elements to adapt to different grid layouts; For content that is not suitable for the current screen size, select the corresponding display method based on the content type and screen size. For long text content, use a scroll bar to display the remaining content on small-screen devices. For pictures and chart visual elements, use scaling or cropping to adapt to the screen size.

6. The Grid-based cross-terminal responsive design system according to claim 5, characterized in that: The expression of the adaptive evaluation index is: ； in, is the adaptive evaluation index, is the base width of the web page, in pixels. is the current size of the web page content, is the maximum acceptable size of the content, is the minimum acceptable size of the content, is the width of the current screen size, The width of the maximum screen size, indicating the preset maximum value.

7. The Grid-based cross-terminal responsive design system according to claim 6, characterized in that: In the dynamic content management module, the process of defining responsive CSS rules for different types of content is as follows: Identify and obtain dynamic content and user-generated content in web pages from different sources, and classify and store the content according to the content form, where the content form is divided into text, image, and video; Parse the stored content, extract key information, format the content, and unify the storage format of the content; Analyze dynamic content and user-generated content in web pages, divide the content into different content segments, and determine the width of each content segment. Combine the viewport width and screen size to obtain the responsiveness coefficient, adjust the adaptability under different screen sizes, and define responsive CSS rules for different types of content. Adjust the layout of dynamically loaded and user-generated content areas, adapt and optimize the content, dynamically adjust text size and line spacing according to screen size, implement image and video processing, and perform dynamic loading.

8. The Grid-based cross-terminal responsive design system according to claim 7, characterized in that: The expression of the response coefficient is: ； in, is the response coefficient, is a global proportional constant used to adjust the overall responsiveness weight, For the The width of the content fragment, is the total number of content fragments, is the base of natural logarithms, is the width of the current viewport, is the standard viewport width, used as a baseline for comparison. express and The proportion of is the width of the maximum screen size, The width of the smallest screen size.

9. A Grid-based cross-terminal responsive design method, implemented based on the Grid-based cross-terminal responsive design system according to any one of claims 1 to 8, characterized in that: The following steps are involved: Step 1: clarify the goals and content structure of web page design, use the device detection and recognition module to collect feature information of access devices, and identify dynamic content and user-generated content in the web page; Step 2: Define the grid container, grid rows, and columns of the CSS Grid layout, set breakpoints for different screen sizes based on the feature information of the device detection and recognition module, and analyze the CSS rule set for the screen size range; Step 3, based on the Grid layout, breakpoint settings, and the CSS rule set for the determined screen size range, extract the web page status information, construct an adaptive evaluation index, and measure and analyze the adaptability of the web page under the corresponding screen size; Step 4: Classify and store dynamic content and user-generated content, extract key information, obtain responsiveness coefficients, adjust adaptability under different screen sizes, and define responsive CSS rules for different types of content; Step 5: Test on different devices and screen sizes, collect user feedback, analyze layout and content display, and continuously optimize based on the test analysis results to iteratively improve design and functionality.

Images