Screen width self-adaptive search bar rendering method and rendering system

Abstract

The invention provides a screen width self-adaptive search bar rendering method and rendering system, and relates to the technical field of page design, and the method comprises the following steps: S1, obtaining the screen width of a device to be applied, and loading a basic style sheet of a search bar; s2, comparing the screen width of the to-be-applied equipment with a preset screen width interval, judging whether an additional style sheet needs to be loaded in the basic style sheet or not according to a comparison result, if the additional style sheet needs to be loaded in the basic style sheet, executing the step S3, and if the additional style sheet needs to be added in the basic style sheet, rendering a search bar applying the basic style sheet; s3, on the basis of a preset style mapping table, searching and dynamically loading an additional style sheet according to a comparison result; s4, enhancing and rendering the search bar according to the screen width of the to-be-applied equipment; and S5, detecting the screen width of the to-be-applied equipment in real time through the event monitor, and when the screen width of the to-be-applied equipment detected in real time crosses a preset screen width interval, executing the steps S2 to S4 again.

Description

Technical Field

[0001] The present invention relates to the technical field of page design, and in particular to a search bar rendering method and a rendering system that are adaptive to screen width. Background Art

[0002] With the rapid development of mobile Internet technology, mobile devices such as smartphones and tablets have become an indispensable part of people's daily lives. These devices not only have a variety of screen sizes, but also have different screen orientations and resolutions, providing users with a rich interactive experience. However, this diversity also brings challenges, especially in user interface design, especially the design of core functional components such as search bars.

[0003] Traditional search bar designs are often based on fixed styles and layouts, which are difficult to adapt to display requirements under different screen sizes and resolutions. When these search bars are applied to devices of different sizes and resolutions, problems such as disordered layout, overlapping elements, and limited functions may occur, seriously affecting the user experience. For example, on a smaller screen, if the input box and button size of the search bar are too large, it may cause a crowded interface and make it difficult for users to input and click comfortably; on a larger screen, if the style of the search bar is too simple, it may appear monotonous and unattractive.

[0004] To solve this problem, existing technologies have proposed a variety of responsive design and adaptive layout technologies, but most of these technologies focus on the overall layout adjustment of the page, and are still insufficient in the fine-grained control of specific functional components such as the search bar. Especially today, with extremely diverse screen sizes and resolutions, it is difficult to meet the complex and changing user needs by simply relying on a simple responsive layout.

[0005] Therefore, it is necessary to provide a search bar rendering method and rendering system that is adaptive to screen width to solve the above technical problems. Summary of the invention

[0006] In order to solve the above technical problems, the present invention provides a search bar rendering method and rendering system with adaptive screen width, which can automatically adjust the style and functional elements of the search bar according to the screen width of different devices, realize the optimized display of the search bar on different devices, and improve the user experience and satisfaction.

[0007] The present invention provides a search bar rendering method that is adaptive to screen width, and the rendering method comprises the following steps:

[0008] S1: obtaining the screen width of the device to be applied, and loading a basic style sheet of the search bar, wherein the basic style sheet includes a plurality of basic styles, and the basic styles are configured to meet the basic display requirements of the search bar under any screen width;

[0009] S2: Compare the screen width of the device to be applied with a preset screen width range, and determine whether it is necessary to load an additional style sheet into the basic style sheet according to the comparison result. If it is necessary to add, execute step S3; otherwise, render the search bar of the basic style sheet;

[0010] S3: based on a preset style mapping table, searching and dynamically loading an additional style sheet according to the comparison result, wherein the style mapping table includes a one-to-one correspondence between screen width intervals and additional style sheets;

[0011] S4: enhancing and rendering the search bar according to the screen width of the device to be applied, wherein the enhancement specifically includes: applying an additional style sheet to adjust the functions and style elements of the search bar on the basis of the basic style sheet to adapt to different screen widths, and the adjustment includes increasing and decreasing;

[0012] S5: Detect the screen width of the device to be applied in real time through the event listener, and re-execute steps S2 to S4 when the screen width of the device to be applied detected in real time crosses a preset screen width range.

[0013] Preferably, step S1 comprises the following steps:

[0014] S11: Read the screen width of the device to be applied through the API interface;

[0015] S12: Based on the read screen width, load the basic style sheet of the search bar.

[0016] Preferably, step S2 specifically comprises:

[0017] Compare the screen width of the device to be applied with the minimum range in the preset screen width range;

[0018] If the screen width of the device to be applied is not greater than the minimum range, the search bar of the application basic style sheet is rendered;

[0019] On the contrary, if the screen width of the device to be applied is greater than the minimum interval, the corresponding interval is marked in the preset screen width interval, and step S3 is executed.

[0020] Preferably, step S3 comprises the following steps:

[0021] S31: searching for a corresponding additional style sheet in a style mapping table according to a corresponding interval marked in a preset screen width interval;

[0022] S32: Asynchronously request and load the found additional style sheets using a dynamic loading method.

[0023] Preferably, step S4 comprises the following steps:

[0024] S41: Parse the additional style sheet and extract the style rules therein;

[0025] S42: Combining and adjusting the style and functional elements of the search bar in combination with the style rules in the basic style sheet;

[0026] S43: Rendering the adjusted search bar.

[0027] Preferably, step S5 comprises the following steps:

[0028] S51: Setting an event listener for detecting screen width changes;

[0029] S52: when the screen width changes, re-acquire the current screen width;

[0030] S53: Determine whether the current screen width crosses the interval marked in step S2 in the preset screen width interval. If so, repeat steps S2 to S4 to ensure that the search bar adapts to the current screen width.

[0031] Preferably, in step S31, when searching for an additional style sheet, a matching additional style sheet is also searched in the style mapping table based on the screen direction of the device to be applied.

[0032] Preferably, in step S5, when the screen orientation of the device to be applied changes, the detection of screen width change is also triggered to ensure that the search bar adapts to the change of screen orientation.

[0033] The present invention also provides a search bar rendering system with adaptive screen width, which is used to execute the search bar rendering method with adaptive screen width, and the rendering system includes:

[0034] A basic style loading module, used to obtain the screen width of the device to be applied, and load a basic style sheet of the search bar, wherein the basic style sheet includes multiple basic styles, and the basic styles are configured to meet the basic display requirements of the search bar under any screen width;

[0035] A style sheet loading decision module is used to compare the screen width of the device to be applied with a preset screen width interval, and determine whether it is necessary to load an additional style sheet in the basic style sheet according to the comparison result. If it is necessary to add, the dynamic loading module is triggered, otherwise the search bar of the basic style sheet is rendered;

[0036] A dynamic loading module, used to search and dynamically load an additional style sheet according to the comparison result based on a preset style mapping table, wherein the style mapping table includes a one-to-one correspondence between screen width intervals and additional style sheets;

[0037] A rendering module, configured to enhance and render the search bar according to the screen width of the device to be applied, wherein the enhancement specifically includes: applying an additional style sheet to adjust the functions and style elements of the search bar on the basis of the basic style sheet to adapt to different screen widths, and the adjustment includes increasing and decreasing;

[0038] The monitoring and re-rendering module is used to detect the screen width of the device to be applied in real time through the event listener, and when the screen width of the device to be applied detected in real time crosses the preset screen width range, the style sheet loading decision module, the dynamic loading module and the rendering module are re-triggered in sequence.

[0039] Compared with the related art, the search bar rendering method and rendering system with adaptive screen width provided by the present invention have the following beneficial effects:

[0040] The present invention realizes flexible adjustment and optimized display of the search bar under different screen sizes by dynamically loading an additional style sheet that matches the screen width. This not only improves the user experience and ensures that the search bar can be well displayed on different devices, but also realizes real-time response to changes in screen width through an event monitoring mechanism, ensuring instant updating of the search bar style.

[0041] In addition, considering the impact of screen orientation on the display effect, the method further incorporates the screen orientation judgment logic, so that the search bar can maintain the best display state when switching between horizontal and vertical screens, effectively solving the problem that traditional static style sheets are difficult to adapt to changes in diverse screen sizes and orientations, and providing strong support for building a more flexible and responsive user interface. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 A flowchart of a search bar rendering method for adaptive screen width provided by the present invention;

[0043] Figure 2 A module structure diagram of a search bar rendering system with adaptive screen width provided by the present invention. DETAILED DESCRIPTION

[0044] The present invention will be further described in detail below in conjunction with the accompanying drawings and embodiments. It is to be understood that the specific embodiments described herein are only used to explain the present invention, rather than to limit the present invention. It should also be noted that, for ease of description, only the parts related to the present invention, rather than all structures, are shown in the accompanying drawings. In addition, the embodiments of the present invention and the features in the embodiments may be combined with each other without conflict.

[0045] It should also be noted that, for ease of description, only the part relevant to the present invention but not all content is shown in the accompanying drawings. It should be mentioned before discussing exemplary embodiments in more detail that some exemplary embodiments are described as processing or methods depicted as flow charts. Although the flow chart describes each operation (or step) as sequential processing, many operations therein can be implemented in parallel, concurrently or simultaneously. In addition, the order of each operation can be rearranged. When its operation is completed, the processing can be terminated, but it can also have additional steps not included in the accompanying drawings. The processing can correspond to methods, functions, procedures, subroutines, subprograms, etc.

[0046] Embodiment 1

[0047] The present invention provides a search bar rendering method that is adaptive to screen width, referring to Figure 1 As shown, the rendering method comprises the following steps:

[0048] S1: Obtain the screen width of the device to be applied, and load a basic style sheet of the search bar, wherein the basic style sheet includes multiple basic styles, and the basic styles are configured to meet the basic display requirements of the search bar under any screen width.

[0049] Specifically, step S1 includes the following steps:

[0050] S11: Read the screen width of the device to be applied through the API interface.

[0051] In this embodiment, the screen width of the device to be applied is first obtained by calling an API interface provided by the device or browser. This API interface is usually built-in in the device or browser and is used to query and return the screen width of the current display environment, including but not limited to the width and height of the screen. For Web development, the window.innerWidth property in JavaScript or the CSS media query function is used.

[0052] The specific working process is as follows:

[0053] Initialize API call: prepare to call the corresponding API interface, which can return the current screen width.

[0054] Execute API call: Through JavaScript code, execute API call command to obtain the internal width of the current window.

[0055] Receive and process data: After the API call returns the screen width data, receive the data and store it in appropriate variables for use in subsequent steps.

[0056] S12: Based on the read screen width, load the basic style sheet of the search bar.

[0057] In this embodiment, according to the screen width information obtained in step S11, the basic style sheet of the search bar is loaded. The basic style sheet is a predefined CSS file that contains basic style rules of the search bar at different screen widths to ensure that the search bar can maintain basic usability and aesthetics on different devices.

[0058] The specific working process is as follows:

[0059] Selecting a style sheet: According to the screen width obtained in step S11, deciding which basic style sheet to use is done by comparing the screen width with predefined breakpoints, which represent thresholds for different screen sizes.

[0060] Loading style sheets: Once the base style sheet to be used is determined, it is loaded through the HTML <link> Tag or JavaScript dynamically load it into the page. If loaded by JavaScript, document.createElement('link') is used to create a new <link> element and set its href attribute to the URL of the base stylesheet, then add it to the document's section.

[0061] Applying styles: Once the base stylesheet is loaded, the browser will automatically apply the CSS rules in it to the elements on the page, including the search bar.

[0062] S2: Compare the screen width of the device to be applied with a preset screen width range, and determine whether it is necessary to load an additional style sheet into the basic style sheet according to the comparison result. If it is necessary to add, execute step S3; otherwise, render the search bar of the basic style sheet.

[0063] Specifically, step S2 is specifically the following steps:

[0064] Compare the screen width of the device to be applied with the minimum range in the preset screen width range;

[0065] If the screen width of the device to be applied is not greater than the minimum range, the search bar of the application basic style sheet is rendered;

[0066] On the contrary, if the screen width of the device to be applied is greater than the minimum interval, the corresponding interval is marked in the preset screen width interval, and step S3 is executed.

[0067] In this embodiment, a preset screen width interval is defined: First, a set of preset screen width intervals is determined, which define the classification of different screen sizes so that different style sheets can be applied to them. These intervals are usually set according to common device screen sizes (such as mobile phones, tablets, desktop monitors, etc.).

[0068] Compare with the minimum interval: compare the screen width of the device to be applied with the minimum interval (that is, the smallest breakpoint or starting value) in the preset screen width interval.

[0069] If the screen width of the device to be applied is not greater than the minimum range (ie, the device screen is very small), it is considered that the basic style sheet is sufficient to meet the display requirements, so the search bar of the basic style sheet is directly rendered without loading an additional style sheet.

[0070] If the screen width of the device to be applied is larger than the minimum interval, the comparison continues downward to find an interval that matches the current screen width.

[0071] Mark the corresponding interval in the preset interval: Once an interval matching the current screen width is found (ie, the screen width falls within a preset interval), mark this interval for subsequent processing.

[0072] Determine whether to load additional style sheets: Based on the marked interval, determine whether to load additional style sheets associated with the interval. If the current interval has specific style requirements (i.e., there are additional style sheets corresponding to the interval), execute step S3 to load these additional style sheets; if not, continue to use the basic style sheet for rendering.

[0073] S3: Based on a preset style mapping table, searching and dynamically loading an additional style sheet according to the comparison result, wherein the style mapping table includes one-to-one correspondence between screen width intervals and additional style sheets.

[0074] Specifically, step S3 includes the following steps:

[0075] S31: searching for a corresponding additional style sheet in a style mapping table according to a corresponding interval marked in a preset screen width interval.

[0076] In this embodiment, the screen width interval marked in step S2 is first traversed. Then, it uses this interval as a key to find the corresponding additional style sheet in the style mapping table. The style mapping table is a predefined data structure, usually an object or an array, which contains a one-to-one correspondence between screen width intervals and additional style sheet URLs.

[0077] S32: Asynchronously request and load the found additional style sheets using a dynamic loading method.

[0078] In this embodiment, once the corresponding additional style sheet URL is found, a dynamic loading method (including but not limited to JavaScript's createElement and appendChild methods, or using loaders provided by modern front-end frameworks / libraries) is used to asynchronously request and load this style sheet. The loading process is asynchronous to avoid blocking other parts of the page.

[0079] S4: enhancing and rendering the search bar according to the screen width of the device to be applied, wherein the enhancement specifically includes: applying an additional style sheet to adjust the functions and style elements of the search bar based on the basic style sheet to adapt to different screen widths, and the adjustment includes increasing and decreasing.

[0080] Specifically, step S4 includes the following steps:

[0081] S41: Parse the additional style sheet and extract the style rules therein.

[0082] In this embodiment, the loaded CSS files (including the base style sheet and the additional style sheet) are automatically parsed, but in this step, more attention is paid to how to identify and apply specific style rules extracted from the additional style sheet. This is achieved through CSS selectors and attributes. JavaScript is used to traverse the DOM (Document Object Model), find elements that match the selectors in the additional style sheet, and extract the corresponding style rules.

[0083] S42: Combining and adjusting the style and functional elements of the search bar in combination with the style rules in the basic style sheet.

[0084] In this embodiment, the style rules in the base style sheet are merged with the style rules in the additional style sheet. In CSS, if two style sheets define conflicting style rules for the same element, the final applied style is determined based on the loading order of the style sheets (the style sheet loaded later has a higher priority) and the specificity of the selector. This step ensures that all relevant style rules are correctly merged and the style and functional elements of the search bar are appropriately adjusted.

[0085] S43: Rendering the adjusted search bar.

[0086] In this embodiment, after all relevant style rules are merged, the search bar is re-rendered to reflect these changes, which includes recalculating the element's layout, color, font size, etc. attributes and displaying the updated search bar on the screen.

[0087] S5: Detect the screen width of the device to be applied in real time through the event listener, and re-execute steps S2 to S4 when the screen width of the device to be applied detected in real time crosses a preset screen width range.

[0088] Specifically, step S5 includes the following steps:

[0089] S51: Setting an event listener for detecting a change in screen width.

[0090] S52: When a change in the screen width is detected, the current screen width is re-acquired.

[0091] S53: Determine whether the current screen width crosses the interval marked in step S2 in the preset screen width interval. If so, repeat steps S2 to S4 to ensure that the search bar adapts to the current screen width.

[0092] In this embodiment, after the current screen width is obtained, it is compared with the preset screen width interval to determine whether it crosses a certain interval. If it crosses the interval, it means that an additional style sheet needs to be loaded or unloaded, and the search bar is re-rendered. At this time, the logic of step S2 to step S4 is repeated.

[0093] Specifically, in step S31, when searching for an additional style sheet, a matching additional style sheet is also searched in the style mapping table based on the screen direction of the device to be applied.

[0094] In this embodiment, the current screen direction of the device to be applied is obtained, and the direction is inferred according to the relationship between the screen width and height.

[0095] The style mapping table should contain information in three dimensions: screen width interval, screen direction, and corresponding additional style tables, wherein the screen width interval and screen direction are input values, and now the additional style table corresponds to both the screen width interval and the screen direction.

[0096] Based on the current screen width and orientation, find a matching additional style sheet in the style map, which can be achieved by traversing the map and checking whether the width range and orientation of each item matches the current screen state.

[0097] Specifically, in step S5, when the screen direction of the device to be applied changes, the detection of the screen width change is also triggered to ensure that the search bar adapts to the change of the screen direction.

[0098] In this embodiment, when setting the event listener in step S51, in addition to monitoring the change of screen width, it is also necessary to monitor the change of screen direction. When the direction change is monitored, step S52 is executed to re-acquire the current screen width and direction.

[0099] In step S53, in addition to comparing whether the screen width crosses the preset interval, it is also necessary to check whether the screen direction has changed. If the screen direction has changed, even if the width does not cross the interval, steps S2 to S4 need to be re-executed to ensure that the search bar adapts to the new direction.

[0100] The working principle of the search bar rendering method for adaptive screen width provided by the present invention is as follows:

[0101] When the search bar needs to be displayed on a specific device, the screen width of the device is first read through the API interface.

[0102] According to the read screen width, a basic style sheet is loaded, which contains the basic style rules required for the search bar to be basically displayed under different screen widths.

[0103] Compare the current device's screen width with a series of preset screen width intervals. These preset intervals represent different screen size ranges, and each interval corresponds to different style requirements.

[0104] If the current screen width is not greater than the minimum interval in the preset interval, the search bar is rendered directly using the basic style sheet (because the basic style sheet is sufficient to meet the display requirements at this width).

[0105] If the current screen width is greater than the minimum interval, the corresponding additional style sheet is searched in the preset style mapping table according to the interval in which the current screen width is located. This mapping table associates the screen width interval with the additional style sheet to ensure that the correct style adjustment can be loaded.

[0106] Once matching additional stylesheets are found, they are dynamically loaded via asynchronous requests so they can be applied during the rendering process.

[0107] Parse the additional style sheet, extract the style rules therein, and merge them with the rules in the base style sheet. This process includes adding, modifying, or deleting style properties to adapt to the current screen width.

[0108] After style merging is complete, the search bar is rendered, ensuring that its functionality and style elements are consistent with the current device's screen width and possible orientation.

[0109] Sets an event listener for detecting changes in screen width (including orientation changes caused by device rotation) in real time.

[0110] When a change in the screen width is detected, the current screen width is reacquired, and it is determined whether it crosses a certain interval boundary in the preset screen width interval.

[0111] If the current screen width spans a certain range, reload any additional stylesheets needed and re-render the search bar to ensure it always matches the current screen width and orientation.

[0112] In summary, the present invention can achieve adaptive rendering of the search bar under different devices and screen widths, thereby improving the user experience. At the same time, through dynamic loading and real-time response mechanisms, it is ensured that the style and function of the search bar can be flexibly adjusted as the screen width changes.

[0113] Embodiment 2

[0114] The present invention also provides a search bar rendering system with adaptive screen width, which is used to execute the search bar rendering method with adaptive screen width, referring to Figure 2 As shown, the rendering system includes:

[0115] The basic style loading module 100 is used to obtain the screen width of the device to be applied and load the basic style sheet of the search bar, wherein the basic style sheet includes multiple basic styles, and the basic styles are configured to meet the basic display requirements of the search bar under any screen width.

[0116] The style sheet loading decision module 200 is used to compare the screen width of the device to be applied with the preset screen width range, and determine whether it is necessary to load an additional style sheet in the basic style sheet based on the comparison result. If it is necessary to add, the dynamic loading module is triggered, otherwise the search bar of the basic style sheet is rendered.

[0117] The dynamic loading module 300 is used to search and dynamically load an additional style sheet according to the comparison result based on a preset style mapping table, wherein the style mapping table includes a one-to-one correspondence between screen width intervals and additional style sheets.

[0118] The rendering module 400 is used to enhance and render the search bar according to the screen width of the device to be applied, wherein the enhancement is specifically: based on the basic style sheet, an additional style sheet is applied to adjust the functions and style elements of the search bar to adapt to different screen widths, and the adjustment includes increase and decrease.

[0119] The monitoring and re-rendering module 500 is used to detect the screen width of the device to be applied in real time through an event listener, and when the screen width of the device to be applied detected in real time crosses a preset screen width range, re-trigger the style sheet loading decision module, the dynamic loading module and the rendering module in sequence.

[0120] The present application is described with reference to flowcharts and / or block diagrams of methods, devices (systems) and computer program products according to embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0121] A person skilled in the art can understand that all or part of the steps in the various methods of the above embodiments can be completed by instructing related hardware through a program, and the program can be stored in a computer-readable storage medium, and the storage medium includes a read-only memory (ROM), a random access memory (RAM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), a one-time programmable read-only memory (OTPROM), an electronically erasable rewritable read-only memory (EEPROM), a compact disc (CD-ROM) or other optical disc storage, magnetic disk storage, magnetic tape storage, or any other computer-readable medium that can be used to carry or store data.

[0122] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

Claims

1. A method for rendering a search bar that is adaptive to screen width, characterized in that: The rendering method comprises the following steps: S1: obtaining the screen width of the device to be applied, and loading a basic style sheet of the search bar, wherein the basic style sheet includes a plurality of basic styles, and the basic styles are configured to meet the basic display requirements of the search bar under any screen width; S2: Compare the screen width of the device to be applied with a preset screen width range, and determine whether it is necessary to load an additional style sheet into the basic style sheet according to the comparison result. If it is necessary to add, execute step S3; otherwise, render the search bar of the basic style sheet; S3: based on a preset style mapping table, searching and dynamically loading an additional style sheet according to the comparison result, wherein the style mapping table includes a one-to-one correspondence between screen width intervals and additional style sheets; S4: enhancing and rendering the search bar according to the screen width of the device to be applied, wherein the enhancement specifically includes: applying an additional style sheet to adjust the functions and style elements of the search bar on the basis of the basic style sheet to adapt to different screen widths, and the adjustment includes increasing and decreasing; S5: Detect the screen width of the device to be applied in real time through the event listener, and re-execute steps S2 to S4 when the screen width of the device to be applied detected in real time crosses a preset screen width range.

2. The method for rendering a search bar adaptive to screen width according to claim 1, characterized in that: Step S1 includes the following steps: S11: Read the screen width of the device to be applied through the API interface; S12: Based on the read screen width, load the basic style sheet of the search bar.

3. The method for rendering a search bar adaptive to screen width according to claim 1, characterized in that: Step S2 is specifically as follows: Compare the screen width of the device to be applied with the minimum range in the preset screen width range; If the screen width of the device to be applied is not greater than the minimum range, the search bar of the application basic style sheet is rendered; On the contrary, if the screen width of the device to be applied is greater than the minimum interval, the corresponding interval is marked in the preset screen width interval, and step S3 is executed.

4. The method for rendering a search bar adaptive to screen width according to claim 1, characterized in that: Step S3 includes the following steps: S31: searching for a corresponding additional style sheet in a style mapping table according to a corresponding interval marked in a preset screen width interval; S32: Asynchronously request and load the found additional style sheets using a dynamic loading method.

5. The method for rendering a search bar adaptive to screen width according to claim 1, characterized in that: Step S4 includes the following steps: S41: Parse the additional style sheet and extract the style rules therein; S42: Combining and adjusting the style and functional elements of the search bar in combination with the style rules in the basic style sheet; S43: Rendering the adjusted search bar.

6. The method for rendering a search bar adaptive to screen width according to claim 1, characterized in that: Step S5 includes the following steps: S51: Setting an event listener for detecting screen width changes; S52: when the screen width changes, re-acquire the current screen width; S53: Determine whether the current screen width crosses the interval marked in step S2 in the preset screen width interval. If so, repeat steps S2 to S4 to ensure that the search bar adapts to the current screen width.

7. The method for rendering a search bar adaptive to screen width according to claim 4, characterized in that: In step S31, when searching for an additional style sheet, a matching additional style sheet is also searched in the style mapping table based on the screen direction of the device to be applied.

8. The method for rendering a search bar adaptive to screen width according to claim 6, characterized in that: In step S5, when the screen direction of the device to be applied changes, the detection of screen width change is also triggered to ensure that the search bar adapts to the change of screen direction.

9. A search bar rendering system with adaptive screen width, used to execute the search bar rendering method with adaptive screen width as claimed in any one of claims 1 to 8, characterized in that: The rendering system comprises: A basic style loading module, used to obtain the screen width of the device to be applied, and load a basic style sheet of the search bar, wherein the basic style sheet includes multiple basic styles, and the basic styles are configured to meet the basic display requirements of the search bar under any screen width; A style sheet loading decision module is used to compare the screen width of the device to be applied with a preset screen width interval, and determine whether it is necessary to load an additional style sheet in the basic style sheet according to the comparison result. If it is necessary to add, the dynamic loading module is triggered, otherwise the search bar of the basic style sheet is rendered; A dynamic loading module, used to search and dynamically load an additional style sheet according to the comparison result based on a preset style mapping table, wherein the style mapping table includes a one-to-one correspondence between screen width intervals and additional style sheets; A rendering module, configured to enhance and render the search bar according to the screen width of the device to be applied, wherein the enhancement specifically includes: applying an additional style sheet to adjust the functions and style elements of the search bar on the basis of the basic style sheet to adapt to different screen widths, and the adjustment includes increasing and decreasing; The monitoring and re-rendering module is used to detect the screen width of the device to be applied in real time through the event listener, and when the screen width of the device to be applied detected in real time crosses the preset screen width range, the style sheet loading decision module, the dynamic loading module and the rendering module are re-triggered in sequence.

Images