A search bar rendering method and rendering system that is adaptive to screen width

Abstract

The present invention provides a search bar rendering method and rendering system that is adaptive to screen width, which relates to the field of page design technology, including S1: obtaining the screen width of a device to be applied and loading a basic style sheet for the search bar; S2: comparing the screen width of the device to be applied with a preset screen width interval, and judging 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, executing step S3, otherwise rendering the search bar to which the basic style sheet is applied; S3: based on a preset style mapping table, searching and dynamically loading the additional style sheet according to the comparison result; S4: enhancing and rendering the search bar according to the screen width of the device to be applied; S5: detecting the screen width of the device to be applied in real time through an event listener, and re-executing steps S2 to S4 when the screen width of the device to be applied detected in real time crosses the preset screen width interval.

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 rendering system that is 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 integral part of our daily lives. These devices offer a wide variety of screen sizes, orientations, and resolutions, providing users with a rich interactive experience. However, this diversity also presents challenges, particularly in user interface design, especially for core functional components like the search bar.

[0003] Traditional search bar designs often rely on fixed styles and layouts, making them difficult to adapt to the display requirements of different screen sizes and resolutions. When these search bars are applied to devices of varying sizes and resolutions, they can lead to layout confusion, overlapping elements, and limited functionality, severely impacting the user experience. For example, on smaller screens, if the search bar's input field and buttons are too large, the interface can become crowded, making it difficult for users to type and click comfortably. On larger screens, if the search bar's style is too simple, it can appear monotonous and unappealing.

[0004] To address this issue, existing technologies have proposed various responsive design and adaptive layout techniques. However, these techniques mostly focus on adjusting the overall page layout and lack fine-grained control over specific functional components like the search bar. Especially with the extreme diversity of screen sizes and resolutions today, relying solely on simple responsive layouts is no longer sufficient to meet the complex and ever-changing needs of users.

[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] To solve the above technical problems, the present invention provides a search bar rendering method and rendering system that is adaptive to screen width, which can automatically adjust the style and functional elements of the search bar according to the screen width of different devices, realize optimized display of the search bar on different devices, and improve user experience and satisfaction.

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

[0008] 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 at 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 based on the comparison result. If so, execute step S3; otherwise, render the search bar of the basic style sheet;

[0010] S3: Based on a preset style mapping table, searching for 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 on the basis of the basic style sheet to adjust the functions and style elements of the search bar to adapt to different screen widths, and the adjustment includes increasing and decreasing;

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

[0013] Preferably, step S1 includes 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 is specifically as follows:

[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 includes the following steps:

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

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

[0023] Preferably, step S4 includes 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 based on the style rules in the basic style sheet;

[0026] S43: Rendering the adjusted search bar.

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

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

[0029] S52: When the screen width changes, the current screen width is retrieved.

[0030] S53: Determine whether the current screen width spans 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 orientation 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 that is adaptive to screen width, which is used to execute the above-mentioned search bar rendering method that is adaptive to screen width. The rendering system includes:

[0034] A basic style loading module, configured to obtain the screen width of the device to be applied and load a basic style sheet for 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 at 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 range, and determine whether an additional style sheet needs to be loaded into the basic style sheet based on the comparison result. If an additional style sheet is required, the dynamic loading module is triggered; otherwise, the search bar of the basic style sheet is rendered;

[0036] A dynamic loading module, configured to search for and dynamically load an additional style sheet based on a 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 based on the screen width of the device to be used, 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, the adjustment including 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 an event listener, and when the screen width of the device to be applied detected in real time exceeds the preset screen width range, the style sheet loading decision module, dynamic loading module and rendering module are re-triggered in sequence.

[0039] Compared with related technologies, the present invention provides a method and system for rendering a search bar that is adaptive to screen width, which has the following beneficial effects:

[0040] The present invention achieves 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 achieves real-time response to changes in screen width through an event monitoring mechanism, ensuring instant update of the search bar style.

[0041] In addition, considering the impact of screen orientation on display effects, the method further incorporates screen orientation judgment logic, so that the search bar can maintain the optimal display state when switching between landscape and portrait modes. This effectively solves the problem that traditional static style sheets are difficult to adapt to diverse screen sizes and orientation changes, and provides strong support for building more flexible and responsive user interfaces. BRIEF DESCRIPTION OF THE DRAWINGS

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

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

[0044] The present invention will be further described in detail below with reference to the accompanying drawings and examples. It will be understood that the specific embodiments described herein are intended only to illustrate the present invention and are not intended to limit the present invention. It should also be noted that, for ease of description, the accompanying drawings only illustrate portions relevant to the present invention, not all of the structures. Furthermore, the embodiments of the present invention and the features of the embodiments may be combined with one another unless there is a conflict.

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

[0046] Example 1

[0047] The present invention provides a search bar rendering method that is adaptive to screen width. Figure 1 As shown, the rendering method includes 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 at 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 being used is first obtained by calling an API provided by the device or browser. This API is typically built into 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 CSS media queries are 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: Execute the API call command through JavaScript code to obtain the internal width of the current window.

[0055] Receive and process data: After the API call returns screen width data, receive this 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, based on the screen width information obtained in step S11, a basic style sheet for the search bar is loaded. The basic style sheet is a predefined CSS file that contains basic style rules for the search bar at different screen widths to ensure that the search bar maintains basic usability and aesthetics on different devices.

[0058] The specific working process is as follows:

[0059] Selecting a style sheet: Based on the screen width obtained in step S11, deciding which base 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 via the HTML <link> Tags 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 style sheet, then add it to the document's section.

[0061] Applying styles: Once the base style sheet is loaded, the browser automatically applies the CSS rules to 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 based on 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 as follows:

[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, pre-set screen width intervals are defined: First, a set of pre-set screen width intervals is determined. These intervals define different screen sizes so that different style sheets can be applied to them. These intervals are typically set based on 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 in the preset screen width interval (that is, the smallest breakpoint or starting value).

[0069] If the screen width of the device to be applied is not greater than the minimum range (that is, 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 certain preset interval), mark this interval for subsequent processing.

[0072] Determine whether additional style sheets need to be loaded: Based on the marked interval, determine whether additional style sheets associated with the interval need to be loaded. If the current interval has specific style requirements (i.e., additional style sheets corresponding to the interval exist), execute step S3 to load these additional style sheets; if not, continue rendering using the base style sheet.

[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 a 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 search the style map for the corresponding additional style sheet. The style map is a predefined data structure, typically an object or array, that 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 sheet 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: 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 increase and decrease.

[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. However, in this step, the focus is on identifying and applying 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: Combine and adjust the style and functional elements of the search bar in accordance 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 style applied is determined based on the order in which the style sheets are loaded (the style sheet loaded later has 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 the changes, which includes recalculating the element's layout, color, font size, and other properties, and displaying the updated search bar on the screen.

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

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

[0089] S51: Setting an event listener for detecting screen width changes.

[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 spans 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 obtaining the current screen width, it is compared with a preset screen width range to determine whether it crosses a certain range. If it crosses a certain range, it indicates that an additional style sheet needs to be loaded or unloaded and the search bar needs to be re-rendered. At this time, the logic of steps S2 to 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 orientation of the device to be applied.

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

[0095] The style map should contain information in three dimensions: screen width range, screen direction, and corresponding additional style sheets. The screen width range and screen direction are input values, and the additional style sheet now corresponds to both the screen width range and the screen direction.

[0096] Based on the current screen width and orientation, find a matching additional style sheet in the style map. This can be done 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 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.

[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] Based on the screen width read, a basic style sheet is loaded. The style sheet contains the basic style rules required for the search bar to be basically displayed at different screen widths.

[0103] Compare the current device's screen width with a set 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 removing style properties to adapt to the current screen width.

[0108] After style merging is complete, the search bar is rendered to ensure that its functionality and style elements are appropriate for the current device's screen width and possible orientations.

[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 screen width is detected, the current screen width is re-acquired, and it is determined whether it crosses a certain interval boundary in a 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 ensures that the style and function of the search bar can be flexibly adjusted as the screen width changes.

[0113] Example 2

[0114] The present invention also provides a search bar rendering system that is adaptive to screen width, which is used to execute the search bar rendering method that is adaptive to screen width. 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 at 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 configured to search for and dynamically load an additional style sheet based on a comparison result based on a preset style mapping table, wherein the style mapping table includes 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, dynamic loading module and rendering module in sequence.

[0120] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems) and computer program products according to the 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 the 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 produce 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] Those skilled in the art will appreciate 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, including 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 programmable read-only memory (EEPROM), a compact disc read-only memory (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 "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, commodity, or apparatus that includes a series of elements includes not only those elements but also other elements not explicitly listed, or includes elements inherent to such process, method, commodity, or apparatus. In the absence of further limitations, an element defined by the phrase "comprises a..." does not exclude the presence of other identical elements in the process, method, commodity, or apparatus that includes the element.

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: 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 at 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 based on the comparison result. If so, execute step S3; otherwise, render the search bar of the basic style sheet; S3: Based on a preset style mapping table, searching for 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; Step S3 includes the following steps: S31: searching for a corresponding additional style sheet in the style mapping table according to the interval marked in the preset screen width interval. 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 orientation of the device to be applied; S32: asynchronously requesting and loading the found additional style sheets using a dynamic loading method; 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 on the basis of the basic style sheet to adjust the functions and style elements of the search bar to adapt to different screen widths, and the adjustment includes increasing and decreasing; S5: Detecting the screen width of the device to be applied in real time through an event listener, and re-execute steps S2 to S4 when the screen width of the device to be applied detected in real time exceeds a preset screen width range.

2. The method for rendering a search bar that is adaptive to screen width according to claim 1, wherein: 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 that is adaptive to screen width according to claim 1, wherein: 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 that is adaptive to screen width according to claim 1, wherein: 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 based on the style rules in the basic style sheet; S43: Rendering the adjusted search bar.

5. The method for rendering a search bar that is adaptive to screen width according to claim 1, wherein: Step S5 includes the following steps: S51: Setting an event listener for detecting screen width changes; S52: When the screen width changes, the current screen width is retrieved. S53: Determine whether the current screen width spans 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.

6. The method for rendering a search bar that is adaptive to screen width according to claim 5, wherein: 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.

7. A screen-width adaptive search bar rendering system, configured to execute the screen-width adaptive search bar rendering method according to any one of claims 1 to 6, characterized in that: The rendering system includes: A basic style loading module, configured to obtain the screen width of the device to be applied and load a basic style sheet for 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 at 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 range, and determine whether an additional style sheet needs to be loaded into the basic style sheet based on the comparison result. If an additional style sheet is required, the dynamic loading module is triggered; otherwise, the search bar of the basic style sheet is rendered; A dynamic loading module, configured to search for and dynamically load an additional style sheet based on a 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 based on the screen width of the device to be used, 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, the adjustment including 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 an event listener, and when the screen width of the device to be applied detected in real time exceeds the preset screen width range, the style sheet loading decision module, dynamic loading module and rendering module are re-triggered in sequence.

Images