Visual adaptation method and device, electronic equipment and storage medium
By converting CSS code into an abstract syntax tree and traversing it, the compatibility problem of visual effect adaptation between devices is solved, automated compatibility processing is achieved, and development efficiency and code quality are improved.
Patent Information
- Application Number
- CN202410839812.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-06-26
- Publication Date
- 2024-12-10
AI Technical Summary
Traditional visual effect adaptation solutions have style compatibility problems on devices of different sizes and resolutions, which leads to developers need to manually write a large amount of compatibility code, which is inefficient and error-prone, and will cause code redundancy, which violates the concept of efficient development. .
By obtaining the to-processed CSS code, converting it into an abstract syntax tree (AST), traversing the AST, processing compatibility issues based on preset recognition and processing rules, generating compatibility CSS code, and automatically dealing with visual inconsistent code during the code packaging and construction process. Fragment, add compatibility codes that are suitable for different models.
It achieves consistent and high-quality visual effects on devices of different sizes and resolutions, improves development efficiency, avoids code redundancy, automated processing of compatibility issues, and reduces the need for manual writing.
Smart Images
Figure CN119105752A_ABST
Abstract
Description
Technical Field
[0001] Embodiments of the present invention relate to the technical field of front-end page visual generation, and in particular to a visual adaptation method and device, an electronic device, and a storage medium. Background Art
[0002] With the continuous development of mobile devices, terminals of different sizes and resolutions continue to emerge, which brings great challenges to the page design draft to present consistent and beautiful visual effects on models of various sizes and resolutions.
[0003] The traditional visual effect adaptation solution is to write a compatible CSS code in the CSS code file when there is a style compatibility problem in the CSS (Cascading Style Sheets) code on a certain model to ensure good performance of the visual effect on the model. Therefore, the traditional CSS compatibility processing method requires manual writing of a large amount of code, which is inefficient and prone to errors. At the same time, this method is contrary to the concept of efficient development and will cause code redundancy. Summary of the invention
[0004] The embodiments of the present invention provide a visual adaptation method and device, an electronic device and a storage medium, which can automatically find code fragments with inconsistent visual performance under different models during the code packaging and construction process, and add compatibility codes adapted to different models, so as to provide developers and users with a consistent and high-quality visual browsing experience.
[0005] In a first aspect, an embodiment of the present invention provides a visual adaptation method, comprising: obtaining a CSS code to be processed;
[0006] Analyze the CSS code and convert it into an abstract syntax tree AST;
[0007] Traverse the CSS rules on the AST, and process the CSS code with compatibility issues according to preset identification and processing rules to obtain a target AST;
[0008] Generates compatible CSS code based on the target AST.
[0009] As an embodiment, the preset identification and processing rules include any one or more of the following:
[0010] Border width compatibility processing, font weight compatibility processing, font centering compatibility processing within the box, and font missing processing.
[0011] As an embodiment, for the border width compatibility processing, the CSS rule traversal of the AST is performed, and the CSS code with compatibility issues is processed according to preset identification and processing rules to obtain a target AST, including:
[0012] When a border attribute of an element whose border width is less than a border width threshold is traversed, the AST syntax structure of the border attribute is parsed, and the AST syntax structure of the border attribute is processed according to the border processing logic; the border processing logic includes: absolutely positioning the border of the element in turn, enlarging the border width of the element by two times, and reducing the border of the element by two times using CSS attributes.
[0013] As an embodiment, for the compatibility processing of centering the font in the box, the CSS rule traversal of the AST is performed, and the CSS code with compatibility issues is processed according to preset identification and processing rules to obtain the target AST, including:
[0014] When the compatibility problem of the font weight attribute is traversed, the corresponding AST syntax structure is parsed, and the AST syntax structure of the font weight attribute is processed according to the font weight processing logic; the font weight processing logic includes: converting the relative font weight into a numerical value and then setting the corresponding stroke width.
[0015] As an embodiment, for the compatibility processing of centering the font in the box, the CSS rule traversal of the AST is performed, and the CSS code with compatibility issues is processed according to preset identification and processing rules to obtain the target AST, including:
[0016] When the font size in the traversed box is smaller than the font threshold, the AST syntax structure of the box is parsed; a margin attribute is added to the font attribute in the box, the margin value of the box is doubled, and then the entire box is reduced by two times.
[0017] As an embodiment, for the font missing processing, the CSS rule traversal of the AST is performed, and the CSS code with compatibility issues is processed according to preset identification and processing rules to obtain the target AST, including:
[0018] When the font-family attribute is traversed, the AST syntax structure of the font-family attribute is parsed and the preset global font style is added.
[0019] As an embodiment, the visual adaptation method is executed based on the webpack platform to achieve automatic packaging and construction of codes;
[0020] The traversing of CSS rules on the AST includes: using a regular expression or a CSS parsing library to traverse the CSS rules.
[0021] In a second aspect, an embodiment of the present invention provides a visual adaptation device, including:
[0022] Import the module to obtain the CSS code to be processed;
[0023] An AST conversion module is used to analyze the CSS code and convert it into an abstract syntax tree AST;
[0024] A processing module, used to perform CSS rule traversal on the AST, and process the CSS code with compatibility issues according to preset identification and processing rules to obtain a target AST;
[0025] A code generation module is used to generate compatible CSS code according to the target AST.
[0026] In a third aspect, an embodiment of the present invention provides an electronic device, including a memory and a processor;
[0027] The memory is used to store a computer program; the processor is used to read the computer program in the memory and implement the visual adaptation method as described above when executing the program.
[0028] In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the visual adaptation method as described in the first aspect.
[0029] Compared with the prior art, the technical solution provided by the embodiment of the present invention has at least the following positive effects:
[0030] In the technical solution of the embodiment of the present invention, by obtaining the CSS code to be processed, analyzing the CSS code and converting it into an abstract syntax tree AST, traversing the CSS rules on the AST, processing the CSS code with compatibility issues according to preset identification and processing rules to obtain the target AST, and generating compatible CSS code according to the target AST, it is possible to automatically find code snippets with inconsistent visual performance under different models during the code packaging and construction process, and add compatibility codes adapted to different models, so as to provide developers and users with a consistent and high-quality visual browsing experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0031] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.
[0032] Figure 1 A schematic diagram of a flow chart of a visual adaptation method provided by an embodiment of the present invention;
[0033] Figure 2 A schematic diagram of the structure of a visual adaptation device provided by an embodiment of the present invention;
[0034] Figure 3 A schematic diagram of the structure of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION
[0035] 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 parts related to the present invention, rather than all structures, are shown in the accompanying drawings.
[0036] The visual adaptation method and device, electronic device, and storage medium of the embodiments of the present application are described below with reference to the accompanying drawings. In view of the problems mentioned in the background technology that manually writing compatible CSS code in CSS code files with compatibility issues has low development efficiency and causes code redundancy, the present application provides a visual adaptation method, in which the CSS code to be processed is obtained, the CSS code is analyzed and converted into an abstract syntax tree AST, the AST is traversed by CSS rules, the CSS code with compatibility issues is processed according to preset identification and processing rules to obtain a target AST, and compatible CSS code is generated according to the target AST, so that the generated compatible CSS code can achieve good and consistent visual effects on models of different sizes and resolutions, and the CSS code processing process is automatically completed during the code construction and packaging process, without the need for manual writing, with high development efficiency and avoidance of code redundancy.
[0037] Specifically, Figure 1 A flowchart of a visual adaptation method provided in an embodiment of the present application is used to automatically find CSS code with compatibility issues during code packaging and automatically process it into CSS code with good compatibility. The method can be executed by a visual adaptation device provided in an embodiment of the present application, which can be implemented in software and / or hardware and configured in an electronic device.
[0038] like Figure 1As shown, the visual adaptation method of the present application includes the following steps:
[0039] Step 101: Get the CSS code to be processed.
[0040] The CSS code to be processed (also known as the page design draft) may have compatibility issues on certain models, affecting the consistency of visual presentation.
[0041] Step 102: Analyze the CSS code and convert it into an abstract syntax tree AST.
[0042] AST (Abstract Syntax Tree) is an abstract representation of the syntax structure of the source code. It represents the syntax structure of the programming language in a tree-like form, and each node on the tree represents a structure in the source code. The reason why the syntax is "abstract" is that the syntax here does not represent every detail that appears in the real syntax.
[0043] By converting CSS code into AST, it is easy to identify CSS code snippets with compatibility issues through AST, and it is convenient to modify CSS properties through the AST structure.
[0044] Step 103: traverse the CSS rules on the AST, and process the CSS code with compatibility issues according to preset identification and processing rules to obtain the target AST.
[0045] Preset recognition and processing rules can be set according to the CSS properties included in the CSS code and the models that need to be compatible, and can be configured according to known compatibility issues. Preset recognition and processing rules can be continuously adjusted and updated to improve the ability to automatically identify and handle compatibility issues.
[0046] The preset identification and processing rules may be for one or more of the following: border width compatibility processing, font weight compatibility processing, font centering compatibility processing in a box, and font missing processing. It is understandable that the preset identification and processing rules may be continuously updated.
[0047] Regarding border width compatibility processing, step 103 may include: when traversing to a border attribute whose border width of an element is less than a border width threshold, parsing the AST syntax structure of the border attribute, and processing the AST syntax structure of the border attribute according to the border processing logic; the border processing logic includes: absolutely positioning the border of the element in turn, enlarging the border width of the element by two times, and reducing the border of the element by two times using CSS attributes.
[0048] Relative Positioning means that the document is from top to bottom, and the document is composed of boxes one by one (which can be compared to paragraphs in Word). If a position:relative attribute is added to the box for normal arrangement, then this is relative positioning, which will not cause the element to leave the document flow, and the space occupied by the element's initial position will be retained. Absolute positioning is relative to the nearest positioned ancestor element. If the nearest ancestor element has no positioning set, then its position is relative to the initial containing block (body). It can be seen that absolute positioning is separated from the document flow. Since the parent element is not positioned, it is positioned based on the initial containing block (body). Now the parent element of the element is positioned. Absolute positioning in the parent element box with relative positioning is moved based on the parent element.
[0049] The principle of border width compatibility processing is as follows: device screen pixels include physical pixels and logical pixels (CSS pixels). Taking iPhone 6 as an example, its physical pixels are 750*1334 and its logical pixels are 375*667. At this time, the border width on the design draft is 0.5px. If the border width threshold is 1px, it is recognized that the border width is less than the border width threshold. If you write CSS property border: 1px solid#fff;, it will be displayed very thick. Therefore, let the border part of the box be enlarged twice, and then reduced by 0.5 times on the basis of enlarging twice, so that the border display can be thinner. The principle is: from the perspective of device display, some models support a minimum of 1px border. The border width defined by the CSS code is 0.5px. At this time, the device displays 1px by default. The style display logic after the CSS code is modified is to enlarge it twice, the device will display 1px, and then reduce it by 0.5 times. The device will reduce 0.5 on the basis of 1px, and it will actually display thinner than 1px.
[0050] For the compatibility processing of centering the font in the box, step 103 performs CSS rule traversal on AST, and processes the CSS code with compatibility issues according to preset identification and processing rules to obtain the target AST, which may include: when traversing to the compatibility problem of font weight attribute, parsing the corresponding AST syntax structure, and processing the AST syntax structure of the font weight attribute according to the font weight processing logic; the font weight processing logic includes: converting the relative font weight into a numerical value and then setting the corresponding stroke width.
[0051] For example, some browsers do not support font weights of 500 and 600 in CSS. When traversing the font-weight attribute, parse the AST syntax structure of the attribute, add the -webkit-text-stroke-width attribute, and add strokeWidth values for different scenarios. In other words, when encountering the font-weight attribute, if the attribute value is bold and bolder, first convert it to 500 and 600, and finally process it into a font-weight value of 400, then append the -webkit-text-stoke-width attribute, and add strokeWidth values for different scenarios. The strokeWidth value is 0.2px, which is a stroke width of 0.2px.
[0052] Regarding the compatibility processing of centering the font in the box, step 103 performs CSS rule traversal on the AST, and processes the CSS code with compatibility issues according to the preset identification and processing rules to obtain the target AST, which may include: when the font size in the box is smaller than the font threshold, the AST syntax structure of the box is parsed; the margin attribute is added to the font attribute in the box, the margin value of the box is doubled, and then the box is reduced by two times as a whole. The compatibility problem of centering the font in the box refers to the problem that when the font is smaller than a certain value on some models of browsers, the font cannot be centered in the box. When the font-size attribute is traversed, the AST syntax structure is parsed, the margin attribute is added to the font attribute, the margin value is doubled, and then the box is reduced by two times as a whole, which can solve the problem of centering the font in the box.
[0053] For font missing processing, step 103 performs CSS rule traversal on AST, and processes the CSS code with compatibility issues according to preset identification and processing rules to obtain the target AST, which may include: when traversing to the font-family attribute, parsing the AST syntax structure of the font-family attribute, and adding the preset global font style.
[0054] The font missing problem refers to the fact that some models do not support certain fonts, causing display abnormalities. When traversing the font-family attribute, parse the AST syntax structure and add some global font styles to font-family to avoid display abnormalities when the system does not support custom fonts.
[0055] Step 104: Generate compatible CSS code according to the target AST.
[0056] The compatible CSS code generated according to the target AST has automatically added compatibility control logic, which can present good and consistent visual effects on devices of different sizes and resolutions.
[0057] In the above steps, traversing CSS rules on AST specifically includes: extracting selectors and style attributes in CSS rules**:
[0058] First, extract all CSS rules from a given CSS file. Each CSS rule usually contains a selector and a style attribute. For example, for the CSS rule `body{margin:0;padding:0;}`, extract the selector `body` and the style attribute `margin:0;padding:0;`. You can use regular expressions or CSS parsing libraries to complete CSS rule traversal. The sample code is as follows:
[0059]
[0060] Then use the abstract syntax tree (AST) to parse the CSS rules:
[0061] Use tools such as PostCSS to parse CSS rules into an abstract syntax tree (AST). AST is an abstract representation of code in a tree structure. By traversing AST, you can modify CSS rules, such as adding browser prefixes or converting specific properties. The sample code is as follows:
[0062]
[0063] Generate new CSS based on compatibility requirements:
[0064] Modify the CSS rules in the AST according to the compatibility requirements of specific browsers. For example, you can use the Autoprefixer plug-in to add necessary browser prefixes to CSS properties.
[0065] Autoprefixer automatically adds prefixes based on the target browser's market share and the latest browser version to ensure CSS compatibility in different browsers.
[0066] The sample code is as follows:
[0067]
[0068] Insert the new CSS rules into the original stylesheet:
[0069] After generating new CSS rules, you need to insert them into the original stylesheet. You can use the API provided by PostCSS to perform the insertion operation.
[0070] Finally, the modified CSS is output as a string and saved or applied to the target style sheet.
[0071] Sample code:
[0072]
[0073] It can be understood that the above examples are general descriptions of CSS rule traversal, compatibility problem identification, and CSS rule modification to meet compatibility requirements. Based on this, the embodiment of the present invention can implement compatibility processing of CSS code according to preset identification and processing rules, so that the generated CSS code meets the compatibility display requirements of different devices.
[0074] The visual adaptation method of this embodiment can be implemented based on the WebPack platform. Webpack is an open source front-end packaging tool. Webpack provides a modular development method that is lacking in front-end development. It treats various static resources as modules and generates optimized code from them. Webpack can set various functions from the terminal or by changing webpack.config.js.
[0075] The following is a brief description of the code packaging and building process based on Webpack, which includes:
[0076] S201: Initialize option (entry-option).
[0077] This phase is the configuration phase, Webpack will read and parse the configuration file, determine the entry file and other configuration options. It will check the entry field in the configuration file, determine the entry file of the project, and create an entry point for each entry file.
[0078] S202: Start compiling (run).
[0079] At this stage, Webpack starts executing the build task. It prepares the data structures and variables required for the build process and is ready to start building.
[0080] S203: Recursively analyze dependencies starting from entry and build (make) each dependent module.
[0081] At this stage, Webpack starts creating modules and chunks. It is triggered from the entry file, recursively parses and builds all modules in the project, and organizes them into chunks.
[0082] S204: Resolve the module location (before-resolve).
[0083] In this phase, Webpack performs some preprocessing operations before resolving the module path. It can be used to modify or extend the module's resolution path, or load some modules in advance.
[0084] S205: Start building a module (build-model).
[0085] This phase is the core phase of building modules. Webpack will use the corresponding Loader to transform and process the module according to the type and content of the module, and generate the module code.
[0086] S206 compiles the module loaded by the loader (normal-module-loader).
[0087] At this stage, Webpack will load and execute the Loader of the normal module. The Loader is responsible for converting the source code of the module into executable JavaScript code.
[0088] S207: Traverse AST and collect dependencies (program) whenever encountering some call expressions such as require.
[0089] This phase is some procedures that Webpack executes after the module is built. It may include some additional processing or optimization steps, such as code splitting, module merging, etc.
[0090] S208: So the dependency build is completed and optimization (seal) begins.
[0091] At this stage, Webpack has completed the construction and processing of the module and is ready to start generating output files. It will encapsulate Chunks and prepare to output them to the file system.
[0092] S209: Output to the dist directory (emit).
[0093] This stage is the last stage of Webpack output files. It will output the packaged Chunk to the specified output directory and generate corresponding files.
[0094] The visual adaptation method of the present application is applied in step S6: normal-module-loader in the form of a plug-in. The visual adaptation method includes the following steps:
[0095] S301: Read the CSS code to be processed.
[0096] The CSS code to be processed may also be referred to as source-code.
[0097] S302: Parse the CSS code.
[0098] The Parser is responsible for parsing the CSS code into an abstract syntax tree AST, that is, converting the textual CSS into a JavaScript object.
[0099] It recognizes various CSS syntax structures, such as selectors, attributes, values, etc., and converts them into corresponding AST nodes. The parser can also recognize some special syntax, such as nested rules, variables, Mixin, etc., which are usually implemented through plug-ins.
[0100] S303: Processing AST.
[0101] The Processor accepts the AST generated by the parser and performs various transformations and operations on the AST to modify and optimize the CSS. It can apply various plugins to perform different tasks, such as adding browser prefixes, compressing CSS, converting CSSNext syntax, etc. The processor can also traverse and modify the AST to implement custom transformation logic.
[0102] S304: stringifier.
[0103] The stringifier converts the AST processed by the processor back to CSS text form. It recursively traverses the AST, converts the AST nodes into the corresponding CSS text, and adds formatting information such as indentation and line breaks as needed. The goal of the stringifier is to generate text similar to the original CSS, but may apply modifications and optimizations made by the processor.
[0104] S305: Output CSS code (generated code).
[0105] A plug-in can be compiled according to the visual adaptation method of an embodiment of the present invention, and the plug-in can be applied to Webpack, so that CSS code fragments with compatibility issues can be automatically identified during the code packaging and construction process and processed into compatible CSS code accordingly.
[0106] The application method of the visual adaptation method of the embodiment of the present invention is described as follows:
[0107] Plugin initialization: Create a node.js module, import the `postcss` module, and create a plugin through postcss.plugin. Node.js is an open source, cross-platform runtime environment built on the Chrome V8 JavaScript engine. It allows developers to write server-side code in JavaScript and execute some scripts that need to run on the server. PostCSS is a tool for processing CSS that allows developers to transform and process CSS through a plug-in system. Unlike traditional preprocessors (such as Sass or Less), PostCSS is not a new style language, but a tool that helps developers process and optimize CSS in the build process.
[0108]
[0109] Traversing CSS rules: In the plugin function, use the AST (abstract syntax tree) provided by PostCSS to traverse the CSS rules. This can be achieved through the root parameter.
[0110]
[0111] Process CSS properties: For each CSS rule, process the CSS properties in it. Developers or users can add, modify or delete properties, depending on the plugin target.
[0112]
[0113] Generate new CSS: After processing the rules and attributes, you may need to generate new CSS. This can be achieved through the result object
[0114]
[0115]
[0116] Working principle:
[0117] Parsing: PostCSS first parses the input CSS code and converts it into an abstract syntax tree (AST). AST is a tree data structure used to represent the code structure. It represents the hierarchy, rules, and properties of the CSS code in an easy-to-process way.
[0118] Plugin processing: Plugins are the core of Webpack. After parsing, plugins perform various tasks, such as conversion, optimization, or generating new CSS code. They can modify nodes in AST as needed to achieve different processing of CSS code.
[0119] AST transformation: The plugin's modifications to AST may include adding, deleting, or modifying nodes, as well as operating on node attributes. These modifications will affect the final generated CSS code.
[0120] Generate: The AST processed by the plugin is finally converted back to CSS code. The generated CSS code can be new code that has been transformed and optimized, or code that is similar to the original code.
[0121] The whole process can be briefly expressed by the following code
[0122]
[0123]
[0124] Identification and handling of compatibility issues:
[0125] a. Border width problem
[0126] This solves the problem of border width less than 1px, and solves the problem that low-version Android does not support 0.5px border width (1px width will be automatically displayed). When encountering the border attribute, the border is absolutely positioned according to the parsed AST syntax structure, then enlarged by two times, and then reduced by two times using CSS attributes. The sample code for border width processing is as follows:
[0127]
[0128]
[0129] b. Font weight problem
[0130] Some browsers do not support the font weight of 500 or 600 in CSS. When encountering the font-weight attribute, add the -webkit-text-stroke-width attribute according to the parsed AST syntax structure, and add the corresponding strokeWidth value for different scenarios. The code example is as follows:
[0131]
[0132]
[0133]
[0134] c. The problem of centering the font in the box
[0135] On some browsers, when the font size is smaller than a certain value, the font cannot be centered in the box. When the font-size attribute is encountered, the AST syntax structure is parsed, and the margin attribute is added to the font attribute, and its margin value is doubled, and then the box is reduced by two times. The sample code is as follows:
[0136]
[0137]
[0138]
[0139] d, default font problem
[0140] Some models do not support certain fonts, which will cause display exceptions. When encountering the font-family attribute, parse the AST syntax structure; perform additional code processing on CSS, and add some global font styles to avoid display exceptions when the system does not support custom fonts.
[0141]
[0142]
[0143] Compared with the prior art, the embodiment of the present invention converts the CSS code to be processed into an abstract syntax tree AST during the code packaging and construction process, traverses the CSS rules on the AST, identifies the CSS code fragments with compatibility issues according to preset identification and processing rules, processes the AST corresponding to the problematic CSS code fragments to obtain the target AST, and then converts the target AST into compatible CSS code, thereby automatically identifying the code with compatibility issues and automatically processing it into compatible code, providing developers and users with a consistent and high-quality visual browsing experience.
[0144] Embodiment 2 of the present invention provides a visual adaptation device, which is configured in an electronic device. Figure 2 As shown, the visual adaptation device 200 includes: an import module 201, an AST conversion module 202, a processing module 203 and a code generation module 204.
[0145] The import module 201 is used to obtain the CSS code to be processed.
[0146] The AST conversion module 202 is used to analyze the CSS code and convert it into an abstract syntax tree AS.
[0147] The processing module 203 is used to traverse the CSS rules on the AST, and process the CSS code with compatibility issues according to preset identification and processing rules to obtain the target AST.
[0148] The code generation module 204 is used to generate compatible CSS code according to the target AST.
[0149] Optionally, the processing module 203 specifically includes: border width compatibility processing, font weight compatibility processing, font centering compatibility processing within a box, and font missing processing.
[0150] Optionally, the processing module 203 performs border width compatibility processing, specifically for parsing the AST syntax structure of the border attribute when a border attribute whose border width of an element is less than a border width threshold is traversed, and processing the AST syntax structure of the border attribute according to the border processing logic; the border processing logic includes: absolutely positioning the border of the element in turn, enlarging the border width of the element by two times, and reducing the border of the element by two times using CSS attributes.
[0151] Optionally, the processing module 203 is used for compatibility processing of font centering in the box, and is specifically used to parse the corresponding AST syntax structure when traversing the font weight attribute compatibility problem, and process the AST syntax structure of the font weight attribute according to the font weight processing logic; the font weight processing logic includes: converting the relative font weight into a numerical value and then setting the corresponding stroke width.
[0152] Optionally, the processing module 203 performs compatibility processing for centering the font in the box, specifically for parsing the AST syntax structure of the box when the font size traversed into the box is smaller than the font threshold; adding a margin attribute to the font attribute in the box, increasing the margin value of the box by two times, and then reducing the entire box by two times.
[0153] Optionally, the processing module 203 processes font missing, and is specifically configured to parse the AST syntax structure of the font-family attribute when traversing to the font-family attribute, and add a preset global font style.
[0154] Optionally, the method corresponding to the visual adaptation device is executed based on the webpack platform to achieve automatic packaging and construction of the code.
[0155] Optionally, the processing module is specifically used to perform CSS rule traversal using a regular expression or a CSS parsing library.
[0156] Compared with the prior art, the visual adaptation device of the embodiment of the present invention converts the CSS code to be processed into an abstract syntax tree AST during the code packaging and construction process, traverses the CSS rules on the AST, identifies the CSS code fragments with compatibility issues according to preset identification and processing rules, processes the AST corresponding to the problematic CSS code fragments to obtain the target AST, and then converts the target AST into compatible CSS code, so that the code with compatibility issues can be automatically identified and automatically processed into compatible code, providing developers and users with a consistent and high-quality visual browsing experience.
[0157] A third embodiment of the present invention provides an electronic device, Figure 3 A schematic diagram of the structure of an electronic device provided by an embodiment of the present invention. The electronic device 30 includes a memory 31 and a processor 32;
[0158] The memory 31 is used to store computer programs; the processor 32 is used to read the computer programs in the memory 31 and implement the visual adaptation method as described in the above embodiments when executing the programs.
[0159] An embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a computer processor, the computer program is used to execute the technical solution of any method embodiment.
[0160] Through the above description of the implementation methods, the technicians in the relevant field can clearly understand that the present invention can be implemented by means of software and necessary general hardware, and of course can also be implemented by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention, in essence or the part that contributes to the prior art, can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as a computer floppy disk, a read-only memory (ROM), a random access memory (RAM), a flash memory (FLASH), a hard disk or an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a grid device, etc.) to execute the methods described in each embodiment of the present invention.
[0161] It is worth noting that in the embodiment of the above-mentioned device, the various units and modules included are only divided according to functional logic, but are not limited to the above-mentioned division, as long as the corresponding functions can be achieved; in addition, the specific names of the functional units are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of the present invention.
[0162] Note that the above are only preferred embodiments of the present invention and the technical principles used. Those skilled in the art will understand that the present invention is not limited to the specific embodiments described herein, and that various obvious changes, readjustments and substitutions can be made by those skilled in the art without departing from the scope of protection of the present invention. Therefore, although the present invention has been described in more detail through the above embodiments, the present invention is not limited to the above embodiments, and may include more other equivalent embodiments without departing from the concept of the present invention, and the scope of the present invention is determined by the scope of the appended claims.
Claims
1. A visual adaptation method, characterized in that: include: Get the CSS code to be processed; Analyze the CSS code and convert it into an abstract syntax tree AST; Traverse the CSS rules on the AST, and process the CSS code with compatibility issues according to preset identification and processing rules to obtain a target AST; Generate compatible CSS code according to the target AST.
2. The visual adaptation method according to claim 1, characterized in that: The preset identification and processing rules include any one or more of the following: Border width compatibility processing, font weight compatibility processing, font centering compatibility processing within the box, and font missing processing.
3. The visual adaptation method according to claim 2, characterized in that: For the border width compatibility processing, the CSS rule traversal is performed on the AST, and the CSS code with compatibility issues is processed according to preset identification and processing rules to obtain the target AST, including: When a border attribute of an element whose border width is less than a border width threshold is traversed, the AST syntax structure of the border attribute is parsed, and the AST syntax structure of the border attribute is processed according to the border processing logic; the border processing logic includes: absolutely positioning the border of the element in turn, enlarging the border width of the element by two times, and reducing the border of the element by two times using CSS attributes.
4. The visual adaptation method according to claim 2, characterized in that: For the font centering compatibility processing in the box, the CSS rule traversal is performed on the AST, and the CSS code with compatibility issues is processed according to the preset identification and processing rules to obtain the target AST, including: When the compatibility problem of the font weight attribute is traversed, the corresponding AST syntax structure is parsed, and the AST syntax structure of the font weight attribute is processed according to the font weight processing logic; the font weight processing logic includes: converting the relative font weight into a numerical value and then setting the corresponding stroke width.
5. The visual adaptation method according to claim 2, characterized in that: For the font centering compatibility processing in the box, the CSS rule traversal is performed on the AST, and the CSS code with compatibility issues is processed according to the preset identification and processing rules to obtain the target AST, including: When the font size in the traversed box is smaller than the font threshold, the AST syntax structure of the box is parsed; a margin attribute is added to the font attribute in the box, the margin value of the box is doubled, and then the entire box is reduced by two times.
6. The visual adaptation method according to claim 2, characterized in that: For the font missing processing, the CSS rule traversal is performed on the AST, and the CSS code with compatibility issues is processed according to preset identification and processing rules to obtain the target AST, including: When the font-family attribute is traversed, the AST syntax structure of the font-family attribute is parsed and the preset global font style is added.
7. The visual adaptation method according to claim 1, characterized in that: The visual adaptation method is executed based on the webpack platform to achieve automatic packaging and construction of codes; The traversing of CSS rules on the AST includes: using a regular expression or a CSS parsing library to traverse the CSS rules.
8. A visual adaptation device, characterized in that: include: Import the module to obtain the CSS code to be processed; An AST conversion module is used to analyze the CSS code and convert it into an abstract syntax tree AST; A processing module, used to perform CSS rule traversal on the AST, and process the CSS code with compatibility issues according to preset identification and processing rules to obtain a target AST; A code generation module is used to generate compatible CSS code according to the target AST.
9. An electronic device, characterized in that: Including memory and processor; A memory for storing a computer program; the processor for reading the computer program in the memory and implementing the visual adaptation method as described in any one of claims 1 to 7 when executing the program.
10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the visual adaptation method as described in any one of claims 1 to 7 is implemented.