Component adaptation method and device based on multiple resolutions and medium

Abstract

The invention discloses a component adaptation method and device based on multiple resolutions and a medium, belongs to the technical field of front ends of mobile terminals, and aims to solve the technical problem of how to unify component development standards and automatically adapt to different resolutions so as to reduce the adaptation cost of front-end development while keeping interface consistency. According to the technical scheme, the method comprises the following steps of: establishing a standardized adaptive reference based on a design draft: selecting the standard size of the design draft as a reference, establishing a design standard comprising font size, spacing and component proportion, and formulating a cross-terminal consistency mapping rule; pixel conversion of context sensing: developing a conversion algorithm based on scaling, and supporting linear and nonlinear scaling modes, so as to provide accurate pixel mapping and boundary control; an adaptive layout engine; an elastic unit conversion mechanism; and components are intelligently zoomed.

Description

Technical Field

[0001] The present invention relates to the field of mobile terminal front-end technology, and in particular to a component adaptation method, device and medium based on multi-resolution. Background Art

[0002] With the explosive growth of mobile device types, the number of terminals with different screen sizes and resolutions has increased dramatically. Traditional front-end adaptation solutions often rely on fixed media queries or percentage layouts, which makes it difficult to accurately control the display effects of components. Developers need to repeatedly debug for various resolutions, resulting in low development efficiency and inconsistent user experience.

[0003] Therefore, how to unify component development standards, automatically adapt to different resolutions, and maintain interface consistency while reducing the adaptation cost of front-end development is a technical problem that needs to be solved urgently. Summary of the invention

[0004] The technical task of the present invention is to provide a component adaptation method, device and medium based on multi-resolution to solve the problem of how to unify component development standards, automatically adapt to different resolutions, and thereby maintain interface consistency while reducing the adaptation cost of front-end development.

[0005] The technical task of the present invention is achieved in the following manner: a component adaptation method based on multi-resolution, the method is as follows:

[0006] Establish a standardized adaptation benchmark based on the design draft: select the standard size of the design draft (such as 750px) as the benchmark, establish design standards including font size, spacing and component ratio, and formulate cross-terminal consistency mapping rules;

[0007] Context-aware pixel transformation: Develop a scaling-based transformation algorithm that supports both linear and nonlinear scaling modes to provide precise pixel mapping and boundary control;

[0008] Adaptive layout engine: Smart layout is implemented based on flexbox and grid through SmartLayout class, percentage, vw / vh and custom unit mixed layout is supported through HybridLayout class, and responsive breakpoints and layout priority configuration are provided through breakpoints and layoutPriorities objects;

[0009] Flexible unit conversion mechanism: Define the conversion rules of px, rem, vw / vh, and rpx units, develop context-aware unit conversion functions, and support precise control of gear conversion accuracy, and implement intelligent scaling based on the design draft ratio, support proportional scaling of fonts, spacing, images, and components, and set minimum / maximum size limit mechanisms; at the same time, reduce repeated calculations by caching conversion results, and use requestAnimationFrame to optimize redrawing, implement lazy load and virtual rendering, and achieve performance optimization;

[0010] Intelligent component scaling: Provides an adapter wrapper with a high-order component (HOC) adaptation solution, a unified adaptation interface and life cycle, and support for component-level and global adaptation strategies. It also implements intelligent layout correction by detecting and automatically adjusting component layout anomalies, a weight-based layout priority algorithm, and a fine-tuning interface.

[0011] As a preferred method, the cross-terminal consistency mapping rules are formulated as follows:

[0012] The basic element mapping rules are as follows:

[0013] Text size: scale proportionally within the range of 12px-36px;

[0014] Spacing: proportional mapping within the range of 8px-32px;

[0015] Icon: Recommended sizes: 24px, 32px, and 48px;

[0016] The component size mapping rules are as follows:

[0017] Button height: three standard levels: 32px / 40px / 48px;

[0018] Input box: two standard heights: 36px / 44px;

[0019] List items: three standard heights: 48px / 56px / 64px;

[0020] The layout adaptation rules are as follows:

[0021] Page margin: 16px-32px dynamic adjustment;

[0022] Component spacing: 8px / 16px / 24px three levels;

[0023] Grid system: 12-column flexible grid.

[0024] As a preference, a scaling-based conversion algorithm is developed as follows:

[0025] Establish the mapping relationship between the actual pixels of the device and the pixels of the design draft: calculate the base scale through the calculateScale() function, the formula is: const baseScale = deviceWidth / designWidth;

[0026] Automatically calculate the scaling ratio based on the screen width: set the scaling threshold in the form of const minScale = a; const maxScale = b; a and b∈R;

[0027] Use devicePixelRatio for accurate calibration: use return Math.min(Math.max(baseScale,minScale),maxScale) to apply scaling limits;

[0028] In different scaling scenarios, the decimal point adopts the rounding strategy;

[0029] Supports linear and non-linear scaling modes as follows:

[0030] In linear mode, a fixed ratio is used for geometric scaling: the original value is multiplied by the scaling ratio through the getScaledValue() function to achieve linear scaling;

[0031] Non-linear mode: Use exponential scaling or logarithmic scaling depending on the screen size range; exponential scaling multiplies the original value by the scaling factor raised to the power of 1.2; logarithmic scaling multiplies the original value by (1 plus the natural logarithm of the scaling factor);

[0032] Critical value processing based on component size;

[0033] In certain scenarios, progressive scaling strategies;

[0034] Provides precise pixel mapping and border control as follows:

[0035] Set the minimum recognizable pixel unit;

[0036] Define pixel rounding rules;

[0037] Establish a boundary overflow processing mechanism: use the pixelMapping() function to limit the application boundary and perform pixel alignment processing;

[0038] Implement high-precision pixel mapping algorithm.

[0039] As a preferred method, the SmartLayout class is used to implement intelligent layout based on flexbox and grid as follows:

[0040] Use flexbox to achieve flexible layout adaptation: first define an object, map the layout type to the corresponding method, and then create a flexbox layout style based on the container and items. Specifically: use flexbox layout, allow items to wrap, calculate and set alignment, and then calculate and set the gap between items;

[0041] Apply the grid system for grid layout: create grid styles based on containers and items;

[0042] Automatically calculate component spacing: first calculate the optimal number of columns, then set the number of columns and set each column to have the same width, and then calculate and set the spacing between items;

[0043] Intelligent processing of content overflow;

[0044] The HybridLayout class supports percentage, vw / vh and custom unit mixed layouts, as follows:

[0045] Mixed calculations combining percentages and fixed units;

[0046] Dynamic conversion mechanism of vw / vh units;

[0047] Customize unit conversion rules;

[0048] Different units will be processed in order of priority;

[0049] Responsive breakpoints and layout priority configurations are provided through the breakpoints and layoutPriorities objects, as follows:

[0050] Define a set of standard breakpoint values: The object breakpoints defines different breakpoints, each of which corresponds to a specific screen width (in pixels); breakpoints are used to determine the size of the user's device screen, so as to select the corresponding layout or style;

[0051] Establish a layout priority system: the layoutPriorities object defines the layout priority corresponding to each breakpoint in the breakpoints object. The priority guides designers and developers to optimize the layout of web pages for different screen sizes.

[0052] Set layout switching conditions and configure responsive behavior rules.

[0053] As a preference, the conversion rules for defining px, rem, vw / vh, and rpx units are as follows:

[0054] px to rem: based on the root element font size;

[0055] px to vw / vh: based on the viewport size percentage;

[0056] px to rpx: conversion based on the design draft ratio;

[0057] The development of context-aware unit conversion functions is as follows:

[0058] Identify current display environment parameters;

[0059] Dynamic calculation of conversion factors;

[0060] Conversion rules related to application scenarios;

[0061] Handling special display requirements;

[0062] Supports precise control of gear shift accuracy, specifically: setting minimum accuracy standards, establishing a rounding rule system, handling edge cases, and optimizing performance while ensuring accuracy;

[0063] The specific steps of realizing intelligent scaling based on the design draft ratio are as follows: calculating the ratio between the design draft and the actual display, establishing a scaling factor matrix, handling special ratio requirements, and optimizing visual effects.

[0064] Preferably, the minimum / maximum size restriction mechanism is as follows:

[0065] Define the minimum available size of a component;

[0066] Overflow handling for maximum size;

[0067] Define threshold behavior;

[0068] Set the constraint priority.

[0069] As a preferred option, the development of a high-order component (HOC) adaptation solution is specifically to: manage the life cycle of the wrapper component, and set the attribute transfer and processing mechanism, the adaptation behavior injection method, and the state management strategy;

[0070] Supporting component-level and global adaptation strategies includes: defining independent component adaptation rules and configuring global adaptation strategies; the global strategies are as follows:

[0071] Breakpoint configuration: define global responsive breakpoints;

[0072] Scaling rules: set the basic scaling range and default values;

[0073] Typesetting system: control font size and proportion;

[0074] Spacing system: defines basic spacing units and grids;

[0075] Layout rules: set container width and grid system;

[0076] Component-level strategy:

[0077] Custom breakpoints: component-specific responsive critical points;

[0078] Scaling behavior: the scaling mode and reference frame of the component;

[0079] Layout rules: size limits and alignment of components;

[0080] Responsive behavior: how the component behaves on different devices;

[0081] Interaction adjustment: touch area and feedback effect;

[0082] Priority handling between strategies;

[0083] Policy inheritance and overriding mechanism.

[0084] More preferably, the weight-based layout priority algorithm includes layout element weight calculation rules, conflict resolution mechanism, dynamic priority adjustment and performance optimization strategy.

[0085] An electronic device comprising: a memory and at least one processor;

[0086] Wherein, the memory stores a computer program;

[0087] The at least one processor executes the computer program stored in the memory, so that the at least one processor performs the above-mentioned multi-resolution-based component adaptation method.

[0088] A computer-readable storage medium stores a computer program, and the computer program can be executed by a processor to implement the multi-resolution-based component adaptation method as described above.

[0089] The multi-resolution-based component adaptation method, device and medium of the present invention have the following advantages:

[0090] (i) The present invention achieves UI consistency across terminals through dynamic responsive design, flexible unit conversion and component intelligent scaling technology, allowing developers to use unified development standards, automatically adapt to different mobile phone resolutions, ensure that the component display effect is highly consistent with the design draft, and significantly reduce the development cost and complexity of multi-terminal adaptation;

[0091] (ii) The present invention unifies component development standards, automatically adapts to different resolutions, thereby maintaining interface consistency while reducing the adaptation cost of front-end development, and realizing intelligent and efficient multi-resolution component adaptation;

[0092] (III) The present invention improves development efficiency, specifically:

[0093] ① Unify the adaptation standards and reduce duplication of development work;

[0094] ② Reduce the complexity of multi-terminal adaptation;

[0095] ③ Provide reusable adaptation components and tools;

[0096] (IV) The present invention has interface consistency, specifically:

[0097] ① Accurately restore the design draft effect;

[0098] ②Achieve visual consistency across terminals;

[0099] ③Automatically handle detail adaptation issues;

[0100] (V) The present invention achieves performance optimization, specifically:

[0101] ①Lightweight adaptation algorithm;

[0102] ② Minimize runtime performance overhead;

[0103] ③Support progressive loading and on-demand adaptation;

[0104] (6) The present invention has scalability and flexibility;

[0105] ①Support business customization and secondary development;

[0106] ② Provide a plug-in adaptation and extension mechanism;

[0107] ③Easy to integrate into the existing technology stack;

[0108] (III) The present invention improves user experience

[0109] ① Ensure consistent interaction between different devices;

[0110] ②Optimize the display effects of various terminals;

[0111] ③Reduce the experience degradation caused by adaptation. BRIEF DESCRIPTION OF THE DRAWINGS

[0112] The present invention is further described below in conjunction with the accompanying drawings.

[0113] Attached Figure 1 A flowchart of a component adaptation method based on multi-resolution. DETAILED DESCRIPTION

[0115] The multi-resolution-based component adaptation method, device and medium of the present invention are described in detail below with reference to the accompanying drawings and specific embodiments of the specification.

[0116] Embodiment 1:

[0117] As attached Figure 1 As shown, this embodiment provides a component adaptation method based on multiple resolutions, and the method is specifically as follows:

[0118] S1. Establish a standardized adaptation benchmark based on the design draft: select the standard size of the design draft (such as 750px) as the benchmark, establish design standards including font size, spacing and component ratio, and formulate cross-terminal consistency mapping rules;

[0119] S2. Context-aware pixel transformation: Develop a scaling-based transformation algorithm that supports both linear and nonlinear scaling modes to provide precise pixel mapping and boundary control.

[0120] S3, Adaptive layout engine: SmartLayout class is used to implement intelligent layout based on flexbox and grid, HybridLayout class is used to support percentage, vw / vh and custom unit hybrid layout, and objects breakpoints and layoutPriorities are used to provide responsive breakpoint and layout priority configuration;

[0121] S4. Flexible unit conversion mechanism: Define the conversion rules of px, rem, vw / vh, and rpx units, develop context-aware unit conversion functions, and support precise control of gear conversion accuracy, and implement intelligent scaling based on the design draft ratio, support proportional scaling of fonts, spacing, images, and components, and set minimum / maximum size limit mechanisms; at the same time, reduce repeated calculations by caching conversion results, and use requestAnimationFrame to optimize redrawing, implement lazy load and virtual rendering, and achieve performance optimization;

[0122] S5. Intelligent component scaling: Provides an adaptation package with the function of developing high-order component (HOC) adaptation solutions, providing a unified adaptation interface and life cycle, and supporting component-level and global adaptation strategy functions. It also implements intelligent layout correction by detecting and automatically adjusting component layout anomalies, weight-based layout priority algorithm, and fine-tuning interface.

[0123] The specific formulating of the cross-terminal consistency mapping rule in step S1 of this embodiment is as follows:

[0124] (1) Basic element mapping rules are as follows:

[0125] Text size: scale proportionally within the range of 12px-36px;

[0126] Spacing: proportional mapping within the range of 8px-32px;

[0127] Icon: Recommended sizes: 24px, 32px, and 48px;

[0128] (2) Component size mapping rules are as follows:

[0129] Button height: three standard levels: 32px / 40px / 48px;

[0130] Input box: two standard heights: 36px / 44px;

[0131] List items: three standard heights: 48px / 56px / 64px;

[0132] (3) Layout adaptation rules are as follows:

[0133] Page margin: 16px-32px dynamic adjustment;

[0134] Component spacing: 8px / 16px / 24px three levels;

[0135] Grid system: 12-column flexible grid.

[0136] The conversion algorithm based on scaling developed in step S2 of this embodiment is specifically as follows:

[0137] (1) Establish the mapping relationship between the actual pixels of the device and the pixels of the design draft: calculate the base scale through the calculateScale() function, the formula is: const baseScale = deviceWidth / designWidth;

[0138] (2) Automatically calculate the scaling ratio based on the screen width: set the scaling threshold in the form of const minScale = a; const maxScale = b; a and b∈R;

[0139] (3) Use devicePixelRatio for precise calibration: use return Math.min(Math.max(baseScale,minScale),maxScale) to implement application scaling limits;

[0140] (4) In different scaling scenarios, the decimal point adopts the rounding strategy; the key code is as follows:

[0141]

[0142] The specific support of linear and nonlinear scaling modes in step S2 of this embodiment is as follows:

[0143] In linear mode, a fixed ratio is used for geometric scaling: the original value is multiplied by the scaling ratio through the getScaledValue() function to achieve linear scaling;

[0144] Non-linear mode: Use exponential scaling or logarithmic scaling depending on the screen size range; exponential scaling multiplies the original value by the scaling factor raised to the power of 1.2; logarithmic scaling multiplies the original value by (1 plus the natural logarithm of the scaling factor);

[0145] Critical value processing based on component size;

[0146] In specific scenarios, the progressive scaling strategy is used; the key codes are as follows:

[0147]

[0148]

[0149] The specific steps of providing accurate pixel mapping and boundary control in step S3 of this embodiment are as follows:

[0150] (1) Setting the minimum recognizable pixel unit;

[0151] (2) Define pixel rounding rules;

[0152] (3) Establish a boundary overflow processing mechanism: use the pixelMapping() function to limit the application boundary and perform pixel alignment processing;

[0153] (4) Implement high-precision pixel mapping algorithm; the key code is as follows:

[0154]

[0155] In step S3 of this embodiment, the smart layout is realized based on flexbox and grid by using the SmartLayout class as follows:

[0156] ① Use flexbox to achieve flexible layout adaptation: first define an object, map the layout type to the corresponding method, and then create a flexbox layout style based on the container and items. Specifically: use flexbox layout, allow items to wrap, calculate and set alignment, and then calculate and set the gap between items;

[0157] ② Apply the grid system for grid layout: create grid styles based on containers and items;

[0158] ③ Automatically calculate component spacing: first calculate the optimal number of columns, then set the number of columns and set each column to have the same width, and then calculate and set the spacing between items;

[0159] ④ Intelligent processing of content overflow; the key codes are as follows:

[0160]

[0161]

[0162] In step S3 of this embodiment, the HybridLayout class is used to support a hybrid layout of percentage, vw / vh, and custom units, as follows:

[0163] ① Combine the mixed calculation of percentage and fixed unit;

[0164] ② Dynamic conversion mechanism of vw / vh units;

[0165] ③Customize unit conversion rules;

[0166] ④Different units are processed in order of priority; the key codes are as follows:

[0167]

[0168]

[0169] In step S3 of this embodiment, the responsive breakpoints and layout priority configurations are provided through the breakpoints object and the layoutPriorities object, as follows:

[0170] ① Define a set of standard breakpoint values: The object breakpoints defines different breakpoints, each of which corresponds to a specific screen width (in pixels); breakpoints are used to determine the size of the user's device screen, thereby selecting the corresponding layout or style;

[0171] ② Establish a layout priority system: The layoutPriorities object defines the layout priority corresponding to each breakpoint in the breakpoints object. The priority guides designers and developers to optimize the layout of web pages for different screen sizes.

[0172] ③Set layout switching conditions and configure responsive behavior rules; the key codes are as follows:

[0173]

[0174] The conversion rules for defining the units of px, rem, vw / vh, and rpx in step S4 of this embodiment are as follows:

[0175] ① px to rem: based on the root element font size;

[0176] ②px to vw / vh: based on the viewport size percentage;

[0177] ③px to rpx: conversion based on the design draft ratio; the key code is as follows:

[0178]

[0179] The unit conversion function for developing context awareness in step S4 of this embodiment is specifically as follows:

[0180] ①Identify the current display environment parameters;

[0181] ②Dynamically calculate the conversion coefficient;

[0182] ③ Conversion rules related to application scenarios;

[0183] ④Handle special display requirements.

[0184] In step S4 of this embodiment, the precise control of the gear shift accuracy is specifically supported by: setting a minimum accuracy standard, establishing a rounding rule system, handling boundary conditions, and optimizing performance while ensuring accuracy;

[0185] In this embodiment, the intelligent scaling based on the design draft ratio in step S4 is specifically: calculating the ratio of the design draft to the actual display, establishing a scaling coefficient matrix, processing special ratio requirements, and optimizing visual effects; the key code is as follows:

[0186]

[0187]

[0188] The minimum / maximum size restriction mechanism in step S4 of this embodiment is specifically as follows:

[0189] ①Define the minimum available size of the component;

[0190] ②Perform overflow processing for the maximum size;

[0191] ③Define critical value behavior;

[0192] ④Set the priority of constraints.

[0193] The specific development scheme of the high-order component (HOC) adaptation in step S5 of this embodiment is: managing the life cycle of the wrapper component, and setting the attribute transfer and processing mechanism, the adaptation behavior injection method and the state management strategy; the key codes are as follows:

[0194]

[0195]

[0196] The supporting component-level and global adaptation strategies in step S5 of this embodiment specifically include: defining component-independent adaptation rules and configuring global adaptation strategies; wherein the global strategies are specifically as follows:

[0197] Breakpoint configuration: define global responsive breakpoints;

[0198] Scaling rules: set the basic scaling range and default values;

[0199] Typesetting system: control font size and proportion;

[0200] Spacing system: defines basic spacing units and grids;

[0201] Layout rules: set container width and grid system;

[0202] Component-level strategy:

[0203] Custom breakpoints: component-specific responsive critical points;

[0204] Scaling behavior: the scaling mode and reference frame of the component;

[0205] Layout rules: size limits and alignment of components;

[0206] Responsive behavior: how the component behaves on different devices;

[0207] Interaction adjustment: touch area and feedback effect;

[0208] Priority processing between strategies;

[0209] Policy inheritance and override mechanism.

[0210] The weight-based layout priority algorithm in step S5 of this embodiment includes layout element weight calculation rules, conflict resolution mechanism, dynamic priority adjustment and performance optimization strategy;

[0211] Among them, the weight-based layout priority algorithm is implemented as follows:

[0212] Layout element weight calculation rules;

[0213] Conflict resolution mechanisms;

[0214] Dynamic adjustment of priorities;

[0215] Performance optimization strategies;

[0216] The key codes are as follows:

[0217]

[0218] 3) Provide a manual fine-tuning interface, as follows:

[0219] Fine-tune API design;

[0220] Adjust the persistence of results;

[0221] Adjustment history;

[0222] Quick recovery mechanism;

[0223] a) Position adjustment, as follows:

[0224] Precise x / y coordinate adjustment;

[0225] Grid alignment function;

[0226] Parent container boundary constraints;

[0227] Smooth animation transitions;

[0228] b) Size adjustment, as follows:

[0229] Precise control of width and height;

[0230] Keep aspect ratio option;

[0231] Minimum / maximum size restrictions;

[0232] Responsive adjustments;

[0233] c) Spacing adjustment, specifically: precise control of margin and padding;

[0234] Supports numeric, string and array formats;

[0235] Optional linkage adjustment of sub-elements;

[0236] Multi-value interval setting;

[0237] d) Alignment function, as follows:

[0238] Horizontal alignment (left, center, right);

[0239] vertical alignment (top, center, bottom);

[0240] Alignment relative to a reference element;

[0241] Intelligent location calculation;

[0242] 3. Cross-frame compatibility, as follows:

[0243] 1) Design a framework-independent adaptation core, as follows:

[0244] General adaptation algorithm abstraction;

[0245] Framework adaptation layer interface definition;

[0246] Design of public function modules;

[0247] Extension mechanism design;

[0248] The key codes are as follows:

[0249]

[0250]

[0251] 2) Provide React, Vue, and Angular adapters, as follows:

[0252] Framework specific lifecycle adaptation;

[0253] State management integration solution;

[0254] Component communication processing;

[0255] Rendering performance optimization;

[0256] The key codes are as follows:

[0257]

[0258] 3) Support micro front-end architecture;

[0259] D. Multi-dimensional adaptation strategy, as follows:

[0260] 1. Device feature adaptation, as follows:

[0261] 1) Identify device type, resolution, and system;

[0262] 2) Provide customized adaptation strategies, as follows: Device feature identification rules;

[0263] Custom response strategies;

[0264] Special equipment handling solutions;

[0265] Performance optimization options;

[0266] Customized adaptation strategies include:

[0267] a) Equipment classification adaptation;

[0268] Mobile phone: Optimize touch area and font;

[0269] Tablet: Optimize column layout;

[0270] Folding screen: handle screen state changes;

[0271] b) System adaptation, as follows: iOS: Adapt to the security area;

[0272] Android: handle different resolutions;

[0273] c) Browser adaptation, as follows: WebKit: handles elastic scrolling;

[0274] Firefox: Optimized rendering performance;

[0275] 3) Support user-defined adaptation rules, as follows: custom breakpoint settings;

[0276] Adapt behavior configuration;

[0277] Component level control;

[0278] Priority management mechanism;

[0279] The key codes are as follows:

[0280]

[0281]

[0282] 2. Interactive adaptation:

[0283] 1) Adjust the interactive response according to the device characteristics;

[0284] 2) Optimize touch, gesture, and animation effects;

[0285] 3) Provide barrier-free adaptation solutions.

[0286] Embodiment 2:

[0287] This embodiment also provides an electronic device, including: a memory and a processor;

[0288] Wherein, the memory stores computer-executable instructions;

[0289] The processor executes the computer-executable instructions stored in the memory, so that the processor executes the component adaptation method based on multiple resolutions in any embodiment of the present invention.

[0290] The processor may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The processor may be a microprocessor or any conventional processor, etc.

[0291] The memory can be used to store computer programs and / or modules. The processor realizes various functions of the electronic device by running or executing the computer programs and / or modules stored in the memory, and calling the data stored in the memory. The memory can mainly include a program storage area and a data storage area, wherein the program storage area can store an operating system, at least one application required for a function, etc.; the data storage area can store data created according to the use of the terminal, etc. In addition, the memory can also include a high-speed random access memory, and can also include a non-volatile memory, such as a hard disk, a memory, a plug-in hard disk, a smart memory card (SMC), a secure digital (SD) card, a flash memory card, at least one disk storage period, a flash memory device, or other volatile solid-state storage devices.

[0292] Embodiment 3:

[0293] This embodiment also provides a computer-readable storage medium, in which a plurality of instructions are stored, and the instructions are loaded by a processor, so that the processor executes the multi-resolution-based component adaptation method in any embodiment of the present invention. Specifically, a system or device equipped with a storage medium can be provided, on which a software program code that implements the functions of any of the above embodiments is stored, and a computer (or CPU or MPU) of the system or device reads and executes the program code stored in the storage medium.

[0294] In this case, the program code itself read from the storage medium can realize the function of any one of the above-mentioned embodiments, and thus the program code and the storage medium storing the program code constitute a part of the present invention.

[0295] The storage medium embodiments for providing the program code include a floppy disk, a hard disk, a magneto-optical disk, an optical disk (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RYM, DVD-RW, DVD+RW), a magnetic tape, a non-volatile memory card, and a ROM. Alternatively, the program code can be downloaded from a server computer via a communication network.

[0296] In addition, it should be clear that the functions of any of the above embodiments can be implemented not only by executing the program code read by the computer, but also by enabling an operating system operating on the computer to complete part or all of the actual operations based on instructions from the program code.

[0297] In addition, it can be understood that the program code read from the storage medium is written to a memory provided in an expansion board inserted into the computer or written to a memory provided in an expansion unit connected to the computer, and then based on the instructions of the program code, a CPU installed on the expansion board or the expansion unit is enabled to perform part or all of the actual operations, thereby realizing the functions of any of the above-mentioned embodiments.

[0298] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein with equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. A component adaptation method based on multi-resolution, characterized in that: The method is as follows: Establish a standardized adaptation benchmark based on the design draft: select the standard size of the design draft as the benchmark, establish design standards including font size, spacing and component ratio, and formulate cross-terminal consistency mapping rules; Context-aware pixel transformation: Develop a scaling-based transformation algorithm that supports both linear and nonlinear scaling modes to provide precise pixel mapping and boundary control; Adaptive layout engine: Smart layout is implemented based on flexbox and grid through SmartLayout class, percentage, vw / vh and custom unit mixed layout is supported through HybridLayout class, and responsive breakpoints and layout priority configuration are provided through breakpoints and layoutPriorities objects; Flexible unit conversion mechanism: define the conversion rules of px, rem, vw / vh, and rpx units, develop context-aware unit conversion functions, and support precise control of gear conversion accuracy, and implement intelligent scaling based on the design draft ratio, support proportional scaling of fonts, spacing, images, and components, and set minimum / maximum size limit mechanisms; at the same time, reduce repeated calculations by caching conversion results, use requestAnimationFrame to optimize redrawing, implement lazy loading and virtualrendering, and achieve performance optimization; Intelligent component scaling: Provides an adapter wrapper that can develop high-level component adaptation solutions, provide a unified adaptation interface and life cycle, and support component-level and global adaptation strategies. It also implements intelligent layout correction by detecting and automatically adjusting component layout anomalies, weight-based layout priority algorithms, and fine-tuning interfaces.

2. The multi-resolution-based component adaptation method according to claim 1, characterized in that: The cross-terminal consistency mapping rules are as follows: The basic element mapping rules are as follows: Text size: scale proportionally within the range of 12px-36px; Spacing: proportional mapping within the range of 8px-32px; Icon: Recommended sizes: 24px, 32px, and 48px; The component size mapping rules are as follows: Button height: three standard levels: 32px / 40px / 48px; Input box: two standard heights: 36px / 44px; List items: three standard heights: 48px / 56px / 64px; The layout adaptation rules are as follows: Page margin: 16px-32px dynamic adjustment; Component spacing: 8px / 16px / 24px three levels; Grid system: 12-column flexible grid.

3. The multi-resolution-based component adaptation method according to claim 1, characterized in that: The scaling-based conversion algorithm is developed as follows: Establish the mapping relationship between the actual pixels of the device and the pixels of the design draft: calculate the base scale through the calculateScale() function, the formula is: const baseScale = deviceWidth / designWidth; Automatically calculate the scaling ratio based on the screen width: set the scaling threshold in the form of const minScale = a; const maxScale = b; a and b ∈ R; Use device pixel ratio for accurate calibration: use return Math.min(Math.max(baseScale,minScale),maxScale) to implement application scaling limits; In different scaling scenarios, the decimal point adopts the rounding strategy; Supports linear and non-linear scaling modes as follows: In linear mode, a fixed ratio is used for geometric scaling: the original value is multiplied by the scaling ratio through the getScaledValue() function to achieve linear scaling; Non-linear mode: Use exponential scaling or logarithmic scaling depending on the screen size range; exponential scaling multiplies the original value by the scaling factor raised to the power of 1.2; logarithmic scaling multiplies the original value by (1 plus the natural logarithm of the scaling factor); Critical value processing based on component size; In certain scenarios, progressive scaling strategies; Provides precise pixel mapping and border control as follows: Set the minimum recognizable pixel unit; Define pixel rounding rules; Establish a boundary overflow processing mechanism: use the pixelMapping() function to limit the application boundary and perform pixel alignment processing; Implement high-precision pixel mapping algorithm.

4. The multi-resolution-based component adaptation method according to claim 1, characterized in that: The SmartLayout class implements smart layout based on flexbox and grid as follows: Use flexbox to achieve flexible layout adaptation: first define an object, map the layout type to the corresponding method, and then create a flexbox layout style based on the container and items. Specifically: use flexbox layout, allow items to wrap, calculate and set alignment, and then calculate and set the gap between items; Apply the grid system for grid layout: create grid styles based on containers and items; Automatically calculate component spacing: first calculate the optimal number of columns, then set the number of columns and set each column to have the same width, and then calculate and set the spacing between items; Intelligent processing of content overflow; The HybridLayout class supports percentage, vw / vh and custom unit mixed layouts, as follows: Mixed calculations combining percentages and fixed units; Dynamic conversion mechanism of vw / vh units; Customize unit conversion rules; Different units will be processed in order of priority; Responsive breakpoints and layout priority configurations are provided through the breakpoints and layoutPriorities objects, as follows: Define a set of standard breakpoint values: The object breakpoints defines different breakpoints, each corresponding to a specific screen width; breakpoints are used to determine the size of the user's device screen, so as to select the corresponding layout or style; Establish a layout priority system: the layoutPriorities object defines the layout priority corresponding to each breakpoint in the breakpoints object. The priority guides designers and developers to optimize the layout of web pages for different screen sizes. Set layout switching conditions and configure responsive behavior rules.

5. The multi-resolution-based component adaptation method according to claim 1, characterized in that: The conversion rules for defining px, rem, vw / vh, and rpx units are as follows: px to rem: based on the root element font size; px to vw / vh: based on the viewport size percentage; px to rpx: conversion based on the design draft ratio; The development of context-aware unit conversion functions is as follows: Identify current display environment parameters; Dynamic calculation of conversion factors; Conversion rules related to application scenarios; Handling special display requirements; Supports precise control of gear shift accuracy, specifically: setting minimum accuracy standards, establishing a rounding rule system, handling edge cases, and optimizing performance while ensuring accuracy; The specific steps of realizing intelligent scaling based on the design draft ratio are as follows: calculating the ratio between the design draft and the actual display, establishing a scaling factor matrix, handling special ratio requirements, and optimizing visual effects.

6. The multi-resolution-based component adaptation method according to claim 1, characterized in that: The minimum / maximum size restriction mechanism is as follows: Define the minimum available size of a component; Overflow handling for maximum size; Define threshold behavior; Sets the constraint priority.

7. The multi-resolution-based component adaptation method according to claim 1, characterized in that: Developing a high-level component adaptation solution specifically includes: managing the lifecycle of the wrapper component, setting up the attribute transfer and processing mechanism, the adaptation behavior injection method, and the state management strategy; Supporting component-level and global adaptation strategies includes: defining independent component adaptation rules and configuring global adaptation strategies; the global strategies are as follows: Breakpoint configuration: define global responsive breakpoints; Scaling rules: set the basic scaling range and default values; Typesetting system: control font size and proportion; Spacing system: defines basic spacing units and grids; Layout rules: set container width and grid system; Component-level strategy: Custom breakpoints: component-specific responsive critical points; Scaling behavior: the scaling mode and reference frame of the component; Layout rules: size limits and alignment of components; Responsive behavior: how the component behaves on different devices; Interaction adjustment: touch area and feedback effect; Priority handling between strategies; Policy inheritance and overriding mechanism.

8. The multi-resolution-based component adaptation method according to any one of claims 1 to 7, characterized in that: The weight-based layout priority algorithm includes layout element weight calculation rules, conflict resolution mechanism, dynamic priority adjustment and performance optimization strategy.

9. An electronic device, characterized in that: include: memory and at least one processor; Wherein, the memory stores a computer program; The at least one processor executes the computer program stored in the memory, so that the at least one processor performs the multi-resolution-based component adaptation method according to any one of claims 1 to 8.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, which can be executed by a processor to implement the multi-resolution-based component adaptation method according to any one of claims 1 to 8.

Images