CN112860255A - 页面适配方法及装置 - Google Patents
页面适配方法及装置 Download PDFInfo
- Publication number
- CN112860255A CN112860255A CN202110181313.1A CN202110181313A CN112860255A CN 112860255 A CN112860255 A CN 112860255A CN 202110181313 A CN202110181313 A CN 202110181313A CN 112860255 A CN112860255 A CN 112860255A
- Authority
- CN
- China
- Prior art keywords
- unit
- target
- size
- target unit
- response type
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 230000006978 adaptation Effects 0.000 title claims abstract description 43
- 238000000034 method Methods 0.000 title claims abstract description 40
- 230000004044 response Effects 0.000 claims abstract description 91
- 238000013461 design Methods 0.000 claims abstract description 58
- 230000008859 change Effects 0.000 claims abstract description 21
- 238000006243 chemical reaction Methods 0.000 claims description 16
- 238000004458 analytical method Methods 0.000 claims description 2
- 230000005012 migration Effects 0.000 abstract description 7
- 238000013508 migration Methods 0.000 abstract description 7
- 238000004891 communication Methods 0.000 description 10
- 238000012545 processing Methods 0.000 description 9
- 238000010586 diagram Methods 0.000 description 8
- 238000013515 script Methods 0.000 description 7
- 238000005516 engineering process Methods 0.000 description 6
- 238000007726 management method Methods 0.000 description 5
- 230000000007 visual effect Effects 0.000 description 5
- 230000003287 optical effect Effects 0.000 description 4
- 230000005236 sound signal Effects 0.000 description 4
- 230000003044 adaptive effect Effects 0.000 description 3
- 238000004364 calculation method Methods 0.000 description 3
- 230000001133 acceleration Effects 0.000 description 2
- 238000007667 floating Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000013519 translation Methods 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000003384 imaging method Methods 0.000 description 1
- 239000002346 layers by function Substances 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/33—Intelligent editors
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Controls And Circuits For Display Device (AREA)
Abstract
本公开是关于页面适配方法及装置。该方法包括：获取页面设计稿中各元素的设计大小，设计大小用响应式单位表示，响应式单位的值跟随设备屏幕大小的变化而变化；将响应式单位转换为目标设备屏幕对应的目标单位以及响应式单位在目标单位下的对应值；根据转换后的目标单位以及响应式单位在目标单位下的对应值生成新的样式文件。其中，定义一个统一的响应式单位，所有元素与页面均保持一致的定义与编写，从而减少开发者的理解成本，使得开发者无需改动代码便可实现元素与页面之间的无缝迁移。通过目标单位与目标等份的统一配置，可以实现页面适配方案的统一管理，可快速支持设计稿的大小与等份的调整以及新单位的支持。
Description
技术领域
本公开涉及网页设计技术领域，尤其涉及页面适配方法及装置。
背景技术
在开发移动端页面时，由于存在不同的屏幕尺寸，如果页面采用固定尺寸开发，则在小屏幕设备上会出现滚动条，大屏幕设备上会出现空白区域，所以移动端页面需对不同屏幕尺寸适配，将页面调整成当前屏幕的大小，保证用户浏览的体验的一致性，避免出现滚动条与空白区域。
目前通常的实现方案是开发者在开发页面时，编写样式(css)文件时对于涉及元素大小、位置等均采用rem单位，如果设计稿为750像素宽，采用的等份为10等份，则1等份为75像素，元素大小或位置的rem值为视觉稿的元素大小或位置像素值除以75，即按钮元素宽度为75像素时，对应的rem值为1rem，但rem单位值是对设计稿的像素值换算后的值，需开发者基于不同等份换算，效率较低。
发明内容
为克服相关技术中存在的问题，本公开实施例提供页面适配方法及装置。所述技术方案如下：
根据本公开实施例的第一方面，提供一种页面适配方法，包括：
获取页面设计稿中各元素的设计大小，所述设计大小用响应式单位表示，所述响应式单位的值跟随设备屏幕大小的变化而变化；
将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值；
根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件。
本公开的实施例提供的技术方案可以包括以下有益效果：本公开实施例提供一种页面适配方法，包括：获取页面设计稿中各元素的设计大小，设计大小用响应式单位表示，响应式单位的值跟随设备屏幕大小的变化而变化；将响应式单位转换为目标设备屏幕对应的目标单位以及响应式单位在目标单位下的对应值；根据转换后的目标单位以及响应式单位在目标单位下的对应值生成新的样式文件。其中，定义一个统一的响应式单位，所有元素与页面均保持一致的定义与编写，从而减少开发者的理解成本，使得开发者无需改动代码便可实现元素与页面之间的无缝迁移。再者，由于采用统一的响应式单位，在编译阶段即可转换成任意的页面适配方案，通过目标单位与目标等份的统一配置，从而实现页面适配方案的统一管理，可快速支持设计稿的大小与等份的调整以及新单位的支持。
在一个实施例中，所述将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值，包括：
获取所述目标单位与目标等份值的配置信息；
依次读取项目中的样式文件；
解析所述样式文件得到样式语法树，所述样式语法树中包括：语句声明以及规则声明；
遍历所述样式语法树中的所述语句声明以及所述规则声明，将所述响应式单位转换为所述目标单位以及所述响应式单位在所述目标单位下的对应值。
在一个实施例中，所述将所述响应式单位转换为所述目标单位以及所述响应式单位在所述目标单位下的对应值，包括：
根据所述响应式单位与目标等份值的比值确定所述响应式单位在所述目标单位下的对应值。
在一个实施例中，所述根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件，包括：
根据vw单位设置根节点字号属性；
在body节点上还原设备默认字号；
根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性和所述设备默认字号生成所述新的样式文件。
在一个实施例中，所述方法还包括：
在所述body节点上增加最大宽度设置参数；
所述根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性和所述设备默认字号生成所述新的样式文件，包括：
根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性、所述设备默认字号和所述最大宽度设置参数生成所述新的样式文件。
在一个实施例中，在所述屏幕宽度为预设像素时对应的所述设备默认字号为预设字号。
根据本公开实施例的第二方面，提供一种页面适配装置，包括：
获取模块，用于获取页面设计稿中各元素的设计大小，所述设计大小用响应式单位表示，所述响应式单位的值跟随设备屏幕大小的变化而变化；
转换模块，用于将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值；
生成模块，用于根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件。
在一个实施例中，所述转换模块，包括：
获取子模块，用于获取所述目标单位与目标等份值的配置信息；
读取子模块，用于依次读取项目中的样式文件；
解析子模块，用于解析所述样式文件得到样式语法树，所述样式语法树中包括：语句声明以及规则声明；
转换子模块，用于遍历所述样式语法树中的所述语句声明以及所述规则声明，将所述响应式单位转换为所述目标单位以及所述响应式单位在所述目标单位下的对应值。
在一个实施例中，所述转换子模块，包括：
转换子单元，用于根据所述响应式单位与目标等份值的比值确定所述响应式单位在所述目标单位下的对应值。
在一个实施例中，所述生成模块包括：
设置子模块，用于根据vw单位设置根节点字号属性；
还原子模块，用于在body节点上还原设备默认字号；
第一生成子模块，用于根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性和所述设备默认字号生成所述新的样式文件。
在一个实施例中，所述装置还包括：
增加子模块，用于在所述body节点上增加最大宽度设置参数；
所述第一生成子模块，包括：
第二生成子模块，用于根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性、所述设备默认字号和所述最大宽度设置参数生成所述新的样式文件。
在一个实施例中，在所述屏幕宽度为预设像素时对应的所述设备默认字号为预设字号。
根据本公开实施例的第三方面，提供一种页面适配装置，包括：
处理器；
用于存储处理器可执行指令的存储器；
其中，所述处理器被配置为：
获取页面设计稿中各元素的设计大小，所述设计大小用响应式单位表示，所述响应式单位的值跟随设备屏幕大小的变化而变化；
将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值；
根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件。
根据本公开实施例的第四方面，提供一种计算机可读存储介质，其上存储有计算机指令，该指令被处理器执行时实现第一方面中任一项所述方法的步骤。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。
图1是根据一示例性实施例示出的页面适配方法的流程图。
图2是根据一示例性实施例示出的页面适配方法的流程图。。
图3是根据一示例性实施例示出的页面适配方法的流程图。
图4是根据一示例性实施例示出的页面适配方法的流程图。
图5是根据一示例性实施例示出的样式文件代码示意图。
图6是根据一示例性实施例示出的一种页面适配装置的框图。
图7是根据一示例性实施例示出的一种页面适配装置中转换模块的框图。
图8是根据一示例性实施例示出的一种页面适配装置中转换子模块的框图。
图9是根据一示例性实施例示出的一种页面适配装置中生成模块的框图。
图10是根据一示例性实施例示出的一种用于页面适配装置80的框图。
具体实施方式
这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
图1是根据一示例性实施例示出的页面适配方法的流程图，如图1所示，该方法包括以下步骤S101-S103：
在步骤S101中，获取页面设计稿中各元素的设计大小，设计大小用响应式单位表示，响应式单位的值跟随设备屏幕大小的变化而变化。
本公开中定义了一个新的响应式单位，用于统一单位。
具体的，为了统一编写页面设计稿时的单位，定义一个新的单位，假定为r，此单位设计为响应式单位，它的值跟随设备屏幕大小的变化而变化，例如：在750像素宽度、10等份的页面设计稿下，按钮元素宽度为75像素，则开发者编写时就为75r，无需根据等份进行划算，则在375像素屏幕下，75r表示为37.5像素，在360像素屏幕下，75r表示为36像素，每个元素的大小、宽度均跟随屏幕大小变化而变化。
在步骤S102中，将响应式单位转换为目标设备屏幕对应的目标单位以及响应式单位在目标单位下的对应值。
由于步骤S101中的响应式单位是自定义单位，设备屏幕并不支持该单位，所以需将响应式单位编译为设备屏幕支持的目标单位，也即，将响应式单位转换为目标设备屏幕对应的目标单位以及响应式单位在目标单位下的对应值。
在一个实施例中，如图2所述，上述步骤S102包括以下子步骤S1021-S1024：
在步骤S1021中，获取目标单位与目标等份值的配置信息；
在步骤S1022中，依次读取项目中的样式文件；
在步骤S1023中，解析样式文件得到样式语法树，样式语法树中包括：语句声明以及规则声明；
在步骤S1024中，遍历样式语法树中的语句声明以及规则声明，将响应式单位转换为目标单位以及响应式单位在目标单位下的对应值。
首先将目标单位与目标等份值设置为动态配置项，然后通上述步骤对样式文件重新进行编译。
其中，所述将所述响应式单位转换为所述目标单位以及所述响应式单位在所述目标单位下的对应值，包括：
根据响应式单位与目标等份值的比值确定响应式单位在目标单位下的对应值。
示例的，转换公式可以为r/等份值，其中，r为上述实施例中的响应式单位。
在步骤S103中，根据转换后的目标单位以及响应式单位在目标单位下的对应值生成新的样式文件。
通过上述步骤，便可根据转换后的目标单位与响应式单位在目标单位下的对应值生成新的样式文件，最后在页面中引入该新的样式文件。
本公开实施例提供一种页面适配方法，包括：获取页面设计稿中各元素的设计大小，设计大小用响应式单位表示，响应式单位的值跟随设备屏幕大小的变化而变化；将响应式单位转换为目标设备屏幕对应的目标单位以及响应式单位在目标单位下的对应值；根据转换后的目标单位以及响应式单位在目标单位下的对应值生成新的样式文件。其中，定义一个统一的响应式单位，所有元素与页面均保持一致的定义与编写，从而减少开发者的理解成本，使得开发者无需改动代码便可实现元素与页面之间的无缝迁移。再者，由于采用统一的响应式单位，在编译阶段即可转换成任意的页面适配方案，通过目标单位与目标等份的统一配置，从而实现页面适配方案的统一管理，可快速支持设计稿的大小与等份的调整以及新单位的支持。
在相关技术中，通常的实现方案是开发者在开发页面时，编写样式(css)文件时对于涉及元素大小、位置等均采用rem单位，如果设计稿为750像素宽，采用的等份为10等份，则1等份为75像素，元素大小或位置的rem值为视觉稿的元素大小或位置像素值除以75，即按钮元素宽度为75像素时，对应的rem值为1rem，同时页面引入JavaScript脚本，页面在设备上运行时脚本会计算设备屏幕宽度，根据屏幕宽度计算出根节点的字号，例如375像素的屏幕下，采用10等份的页面，则根节点的字号设置为37.5像素，不同屏幕大小脚本会动态设置不同的字号，从而页面中每个元素的大小、位置等均响应屏幕大小的变化而变化。
由于rem单位需动态设置根节点的字号属性，所以需在设备端动态设置字号，具体的，当目标单位采用rem时，如图3所示，上述步骤S103包括以下子步骤S1031-S1033：
步骤S1031、根据vw单位设置根节点字号属性。
此方案使用vw单位设置根节点字号属性，vw为相对屏幕宽度的单位，一个屏幕宽度分为100vw，在750像素屏幕、7.5等份下1vw表示为7.5像素，1等份表示为100像素，则1等份换算后的vw值为13.33333333vw，换算公式为100vw/7.5。
步骤S1032、在body节点上还原设备默认字号。
步骤S1033、根据响应式单位在目标单位下的对应值、根节点字号属性和设备默认字号生成新的样式文件。
在本公开中，通过使用vw单位设置根节点字号属性，可以有效避免类似相关技术中通过JS去实时的计算根节点字号属性，从而提升了效率。
在一个实施例中，上述方法还包括：在body节点上增加最大宽度设置参数；此时，根据响应式单位在目标单位下的对应值、根节点字号属性和设备默认字号生成新的样式文件，包括：
根据响应式单位在目标单位下的对应值、根节点字号属性、设备默认字号和最大宽度设置参数生成新的样式文件。
由于页面需在PC桌面端显示，为了提升在PC端显示时用户的视觉感受，需要设置在PC桌面显示时的最大宽度，例如：限制页面最大750像素宽度，方便用户浏览。
进一步的，在屏幕宽度为预设像素时对应的设备默认字号为预设字号。
例如：对于宽度为360、375、414、480、540像素的屏幕采取设置固定的字号，避免计算时出现浮点数。
以下通过实施例详细介绍本公开中的技术方案：
在开发移动端页面时，由于存在不同的屏幕尺寸，如果页面采用固定尺寸开发，则在小屏幕设备上会出现滚动条，大屏幕设备上会出现空白区域，所以移动端页面需对不同屏幕尺寸适配，将页面调整成当前屏幕的大小，保证用户浏览的体验的一致性，避免出现滚动条与空白区域。
在了解现阶段实现方案之前，需理解以下概念：
1.rem单位是一个相对单位，相对根节点(html)的字号(font-size)，1rem实际表示的像素值为1乘以根节点的字号，例如字号为37.5像素，则1rem等于37.5像素。
2.设计师在设计页面时，不同页面会存在不同元素，例如按钮、图标、图片等，不同元素又对应不同的大小、间距等，为了达到统一的视觉风格，通常会将页面划为栅格等份，来规范元素的摆放，常见的有10、20、25等份，对于开发者开发页面时，1等份等于1rem，即在375像素屏幕下、页面划分为10等份时，1rem等于37.5像素，则根节点字号为37.5像素。
目前通常的实现方案是开发者在开发页面时，编写样式(css)文件时对于涉及元素大小、位置等均采用rem单位，如果设计稿为750像素宽，采用的等份为10等份，则1等份为75像素，元素大小或位置的rem值为视觉稿的元素大小或位置像素值除以75，即按钮元素宽度为75像素时，对应的rem值为1rem，同时页面引入JavaScript脚本，页面在设备上运行时脚本会计算设备屏幕宽度，根据屏幕宽度计算出根节点的字号，例如375像素的屏幕下，采用10等份的页面，则根节点的字号设置为37.5像素，不同屏幕大小脚本会动态设置不同的字号，从而页面中每个元素的大小、位置等均响应屏幕大小的变化而变化。
然而，上述的现有技术仍然存在部分不足点：
1)rem单位值是对设计稿的像素值换算后的值，需开发者基于不同等份换算，效率较低。
2)开发者在开发页面时会采用不同的单位，例如rem、px等，然后将其换算成对应的rem值，造成单位无法统一管理，不同项目出现不同的单位。
3)由于市面上屏幕尺寸的不断变化，设计稿的宽度与等份也跟随变化，从而会产生不同等份以及基于不同设计稿宽度开发的页面，从而会导致组件与页面之间无法直接复用，影响开发者效率。
为了解决上述技术问题，本公开提出一种页面适配方法的方案。该技术方案从功能层面共分为三个部分，定义单位、编译模块和运行模块，首先定义一个新的响应式单位，用于统一单位；编译模块负责在编译时将响应式单位编译为目标单位以及目标等份；运行模块负责在不同屏幕将页面适配成同屏幕大小尺寸，下面依次为三个部分的详细描述：
1.定义单位
为了统一编写时的单位，定义一个新的单位，假定为r，此单位设计为响应式单位，值跟随设备屏幕大小变化而变化，例如在750像素宽度、10等份的设计稿下，按钮元素宽度为75像素，则开发者编写时为75r，无需根据等份进行划算，则在375像素屏幕下，75r表示为37.5像素，在360像素屏幕下，表示为36像素，每个元素的大小、宽度均跟随屏幕大小变化而变化，由于r是自定义单位，设备并不支持该单位，所以需将r编译为设备支持的目标单位，故需引入编译模块对单位编译，基于公司用户的设备环境，目前采用的设计稿宽度为750像素，等份为7.5，故1等份表示的值为100像素，后续表述为等份值，同时目标单位采用rem。
2.编译模块
编译模块用于将响应式单位r转换为目标单位以及对应值，首先将目标单位与目标等份值设置为动态配置项，然后通过如图4所示的步骤对样式文件编译：
a)读取目标单位与目标等份值配置；
b)依次读取项目中的样式文件；
c)解析样式文件得到样式语法树；
d)遍历语法树中的语句声明以及规则声明，将响应式单位r转换为目标单位以及对应值，转换公式为r/等份值；
e)将转换后的语法树生成新的样式文件；
通过上续步骤，则完成了样式文件的转换过程，得到基于目标单位与目标等份值换算后的单位与对应值，最后在页面引入新的样式文件。
3.运行模块
由于rem单位需动态设置根节点的字号属性，所以需引入运行模块在设备端动态设置字号，对于目前采用的rem目标单位方案需引入运行模块，如后续采用其他适配方案，则无需引入该模块，此方案采用如下方法：
a)由于通过JavaScript脚本设置字号存在性能以及屏幕宽度获取不正确问题，此方案使用vw单位设置根节点字号属性，vw为相对屏幕宽度的单位，一个屏幕宽度分为100vw，在750像素屏幕、7.5等份下1vw表示为7.5像素，1等份表示为100像素，则换算后的vw值为13.33333333vw，换算公式为100vw/7.5；
b)在body节点上还原设备默认字号以及增加最大宽度设置，由于页面需在桌面端显示，限制页面最大750像素宽度，方便用户浏览；
c)对于宽度为360、375、414、480、540像素的屏幕采取设置固定的字号，避免计算时出现浮点数；
通过如上方法后得到一份样式文件，代码如图5所示，最后项目引入该样式文件即可。
本发明提供的技术方案主要的保护点包括以下两点：
1)定义一个统一的响应式单位，所有组件与页面均保持一致的定义与编写，从而减少开发者的理解成本，无需改动代码实现组件与页面之间的无缝迁移。
2)由于采用统一的响应式单位，在编译阶段即可转换成任意的页面适配方案，通过目标单位与目标等份的统一配置，从而实现页面适配方案的统一管理，可快速支持设计稿的大小与等份的调整以及新单位的支持。
本发明的主要优点如下：
1)统一的响应式单位，所有组件与页面均保持一致性，减少开发者的理解成本，也同时减少组件与页面之前的迁移成本，可无需改动代码实现组件与页面之间的无缝迁移，从而提升项目与组件之间的复用性。
2)由于采用统一的响应式单位，在编译时即可转换成不同的页面适配方案，由于单位与等份均配置化，可统一管理所有页面的适配方式，可快速响应设计稿的基准宽度与等份的调整以及新单位的支持。
进一步的，本发明提供的技术方案通过大量项目实战经验表明该方案稳定可靠、扩展性高，可统一所有项目与组件的适配，可达到项目与组件的无缝迁移，极大提升开发效率。
下述为本公开装置实施例，可以用于执行本公开方法实施例。
图6是根据一示例性实施例示出的一种页面适配装置的框图，该装置可以通过软件、硬件或者两者的结合实现成为电子设备的部分或者全部。如图6所示，该页面适配装置包括：
获取模块11，用于获取页面设计稿中各元素的设计大小，所述设计大小用响应式单位表示，所述响应式单位的值跟随设备屏幕大小的变化而变化；
转换模块12，用于将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值；
生成模块13，用于根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件。
在一个实施例中，如图7所示，所述转换模块12，包括：
获取子模块121，用于获取所述目标单位与目标等份值的配置信息；
读取子模块122，用于依次读取项目中的样式文件；
解析子模块123，用于解析所述样式文件得到样式语法树，所述样式语法树中包括：语句声明以及规则声明；
转换子模块124，用于遍历所述样式语法树中的所述语句声明以及所述规则声明，将所述响应式单位转换为所述目标单位以及所述响应式单位在所述目标单位下的对应值。
在一个实施例中，如图8所示，所述转换子模块124，包括：
转换子单元1241，用于根据所述响应式单位与目标等份值的比值确定所述响应式单位在所述目标单位下的对应值。
在一个实施例中，如图9所示，所述生成模块13包括：
设置子模块131，用于根据vw单位设置根节点字号属性；
还原子模块132，用于在body节点上还原设备默认字号；
第一生成子模块133，用于根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性和所述设备默认字号生成所述新的样式文件。
在一个实施例中，所述装置还包括：
增加子模块，用于在所述body节点上增加最大宽度设置参数；
所述第一生成子模块133，包括：
第二生成子模块，用于根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性、所述设备默认字号和所述最大宽度设置参数生成所述新的样式文件。
在一个实施例中，在所述屏幕宽度为预设像素时对应的所述设备默认字号为预设字号。
根据本公开实施例的第三方面，提供一种页面适配装置，包括：
处理器；
用于存储处理器可执行指令的存储器；
其中，处理器被配置为：
获取页面设计稿中各元素的设计大小，所述设计大小用响应式单位表示，所述响应式单位的值跟随设备屏幕大小的变化而变化；
将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值；
根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件。
上述处理器还可被配置为：
在一个实施例中，所述将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值，包括：
获取所述目标单位与目标等份值的配置信息；
依次读取项目中的样式文件；
解析所述样式文件得到样式语法树，所述样式语法树中包括：语句声明以及规则声明；
遍历所述样式语法树中的所述语句声明以及所述规则声明，将所述响应式单位转换为所述目标单位以及所述响应式单位在所述目标单位下的对应值。
在一个实施例中，所述将所述响应式单位转换为所述目标单位以及所述响应式单位在所述目标单位下的对应值，包括：
根据所述响应式单位与目标等份值的比值确定所述响应式单位在所述目标单位下的对应值。
在一个实施例中，所述根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件，包括：
根据vw单位设置根节点字号属性；
在body节点上还原设备默认字号；
根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性和所述设备默认字号生成所述新的样式文件。
在一个实施例中，所述方法还包括：
在所述body节点上增加最大宽度设置参数；
所述根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性和所述设备默认字号生成所述新的样式文件，包括：
根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性、所述设备默认字号和所述最大宽度设置参数生成所述新的样式文件。
在一个实施例中，在所述屏幕宽度为预设像素时对应的所述设备默认字号为预设字号。
关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
图10是根据一示例性实施例示出的一种用于页面适配装置80的框图，该装置适用于终端设备。例如，装置80可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。
装置80可以包括以下一个或多个组件：处理组件802，存储器804，电源组件806，多媒体组件808，音频组件810，输入/输出(I/O)的接口812，传感器组件814，以及通信组件816。
处理组件802通常控制装置80的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件802可以包括一个或多个处理器820来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件802可以包括一个或多个模块，便于处理组件802和其他组件之间的交互。例如，处理组件802可以包括多媒体模块，以方便多媒体组件808和处理组件802之间的交互。
存储器804被配置为存储各种类型的数据以支持在装置80的操作。这些数据的示例包括用于在装置80上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器804可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。
电源组件806为装置80的各种组件提供电力。电源组件806可以包括电源管理系统，一个或多个电源，及其他与为装置80生成、管理和分配电力相关联的组件。
多媒体组件808包括在所述装置80和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件808包括一个前置摄像头和/或后置摄像头。当装置80处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。
音频组件810被配置为输出和/或输入音频信号。例如，音频组件810包括一个麦克风(MIC)，当装置80处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器804或经由通信组件816发送。在一些实施例中，音频组件810还包括一个扬声器，用于输出音频信号。
I/O接口812为处理组件802和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。
传感器组件814包括一个或多个传感器，用于为装置80提供各个方面的状态评估。例如，传感器组件814可以检测到装置80的打开/关闭状态，组件的相对定位，例如所述组件为装置80的显示器和小键盘，传感器组件814还可以检测装置80或装置80一个组件的位置改变，用户与装置80接触的存在或不存在，装置80方位或加速/减速和装置80的温度变化。传感器组件814可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件814还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件814还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。
通信组件816被配置为便于装置80和其他设备之间有线或无线方式的通信。装置80可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件816经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件816还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。
在示例性实施例中，装置80可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子组件实现，用于执行上述方法。
在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器804，上述指令可由装置80的处理器820执行以完成上述方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。
一种非临时性计算机可读存储介质，当所述存储介质中的指令由装置80的处理器执行时，使得装置80能够执行上述的页面适配方法，所述方法包括：
获取页面设计稿中各元素的设计大小，所述设计大小用响应式单位表示，所述响应式单位的值跟随设备屏幕大小的变化而变化；
将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值；
根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件。
在一个实施例中，所述将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值，包括：
获取所述目标单位与目标等份值的配置信息；
依次读取项目中的样式文件；
解析所述样式文件得到样式语法树，所述样式语法树中包括：语句声明以及规则声明；
遍历所述样式语法树中的所述语句声明以及所述规则声明，将所述响应式单位转换为所述目标单位以及所述响应式单位在所述目标单位下的对应值。
在一个实施例中，所述将所述响应式单位转换为所述目标单位以及所述响应式单位在所述目标单位下的对应值，包括：
根据所述响应式单位与目标等份值的比值确定所述响应式单位在所述目标单位下的对应值。
在一个实施例中，所述根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件，包括：
根据vw单位设置根节点字号属性；
在body节点上还原设备默认字号；
根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性和所述设备默认字号生成所述新的样式文件。
在一个实施例中，所述方法还包括：
在所述body节点上增加最大宽度设置参数；
所述根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性和所述设备默认字号生成所述新的样式文件，包括：
根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性、所述设备默认字号和所述最大宽度设置参数生成所述新的样式文件。
在一个实施例中，在所述屏幕宽度为预设像素时对应的所述设备默认字号为预设字号。
本领域技术人员在考虑说明书及实践这里公开的公开后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。
Claims (10)
1.一种页面适配方法，其特征在于，包括：
获取页面设计稿中各元素的设计大小，所述设计大小用响应式单位表示，所述响应式单位的值跟随设备屏幕大小的变化而变化；
将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值；
根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件。
2.根据权利要求1所述的方法，其特征在于，所述将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值，包括：
获取所述目标单位与目标等份值的配置信息；
依次读取项目中的样式文件；
解析所述样式文件得到样式语法树，所述样式语法树中包括：语句声明以及规则声明；
遍历所述样式语法树中的所述语句声明以及所述规则声明，将所述响应式单位转换为所述目标单位以及所述响应式单位在所述目标单位下的对应值。
3.根据权利要求2所述的方法，其特征在于，所述将所述响应式单位转换为所述目标单位以及所述响应式单位在所述目标单位下的对应值，包括：
根据所述响应式单位与目标等份值的比值确定所述响应式单位在所述目标单位下的对应值。
4.根据权利要求1所述的方法，其特征在于，所述根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件，包括：
根据vw单位设置根节点字号属性；
在body节点上还原设备默认字号；
根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性和所述设备默认字号生成所述新的样式文件。
5.根据权利要求4所述的方法，其特征在于，所述方法还包括：
在所述body节点上增加最大宽度设置参数；
所述根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性和所述设备默认字号生成所述新的样式文件，包括：
根据所述响应式单位在所述目标单位下的对应值、所述根节点字号属性、所述设备默认字号和所述最大宽度设置参数生成所述新的样式文件。
6.根据权利要求4所述的方法，其特征在于，在所述屏幕宽度为预设像素时对应的所述设备默认字号为预设字号。
7.一种页面适配装置，其特征在于，包括：
获取模块，用于获取页面设计稿中各元素的设计大小，所述设计大小用响应式单位表示，所述响应式单位的值跟随设备屏幕大小的变化而变化；
转换模块，用于将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值；
生成模块，用于根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件。
8.根据权利要求7所述的装置，其特征在于，所述转换模块，包括：
获取子模块，用于获取所述目标单位与目标等份值的配置信息；
读取子模块，用于依次读取项目中的样式文件；
解析子模块，用于解析所述样式文件得到样式语法树，所述样式语法树中包括：语句声明以及规则声明；
转换子模块，用于遍历所述样式语法树中的所述语句声明以及所述规则声明，将所述响应式单位转换为所述目标单位以及所述响应式单位在所述目标单位下的对应值。
9.一种页面适配装置，其特征在于，包括：
处理器；
用于存储处理器可执行指令的存储器；
其中，所述处理器被配置为：
获取页面设计稿中各元素的设计大小，所述设计大小用响应式单位表示，所述响应式单位的值跟随设备屏幕大小的变化而变化；
将所述响应式单位转换为目标设备屏幕对应的目标单位以及所述响应式单位在所述目标单位下的对应值；
根据转换后的所述目标单位以及所述响应式单位在所述目标单位下的对应值生成新的样式文件。
10.一种计算机可读存储介质，其上存储有计算机指令，其特征在于，该指令被处理器执行时实现权利要求1至6中任一项所述方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110181313.1A CN112860255A (zh) | 2021-02-08 | 2021-02-08 | 页面适配方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110181313.1A CN112860255A (zh) | 2021-02-08 | 2021-02-08 | 页面适配方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112860255A true CN112860255A (zh) | 2021-05-28 |
Family
ID=75989546
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110181313.1A Pending CN112860255A (zh) | 2021-02-08 | 2021-02-08 | 页面适配方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112860255A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115080027A (zh) * | 2022-08-24 | 2022-09-20 | 深圳市信润富联数字科技有限公司 | web页面自动适配方法、装置、设备及存储介质 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105468382A (zh) * | 2016-02-01 | 2016-04-06 | 浙江慧脑信息科技有限公司 | 一种自适应布局的编程方法 |
| CN107239318A (zh) * | 2017-06-13 | 2017-10-10 | 腾讯科技（深圳）有限公司 | 应用转换方法、装置及设备 |
| CN107239436A (zh) * | 2017-05-31 | 2017-10-10 | 腾讯科技（深圳）有限公司 | 一种数据转换方法和装置 |
| CN110333863A (zh) * | 2019-06-17 | 2019-10-15 | 无线生活（杭州）信息科技有限公司 | 一种生成、显示小程序页面的方法及装置 |
| CN110837617A (zh) * | 2019-10-11 | 2020-02-25 | 平安科技（深圳）有限公司 | 一种网页自适应布局方法、服务器及计算机可读存储介质 |
| CN111399831A (zh) * | 2020-02-24 | 2020-07-10 | 微民保险代理有限公司 | 页面的展示方法和装置、存储介质、电子装置 |
-
2021
- 2021-02-08 CN CN202110181313.1A patent/CN112860255A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105468382A (zh) * | 2016-02-01 | 2016-04-06 | 浙江慧脑信息科技有限公司 | 一种自适应布局的编程方法 |
| CN107239436A (zh) * | 2017-05-31 | 2017-10-10 | 腾讯科技（深圳）有限公司 | 一种数据转换方法和装置 |
| CN107239318A (zh) * | 2017-06-13 | 2017-10-10 | 腾讯科技（深圳）有限公司 | 应用转换方法、装置及设备 |
| CN110333863A (zh) * | 2019-06-17 | 2019-10-15 | 无线生活（杭州）信息科技有限公司 | 一种生成、显示小程序页面的方法及装置 |
| CN110837617A (zh) * | 2019-10-11 | 2020-02-25 | 平安科技（深圳）有限公司 | 一种网页自适应布局方法、服务器及计算机可读存储介质 |
| CN111399831A (zh) * | 2020-02-24 | 2020-07-10 | 微民保险代理有限公司 | 页面的展示方法和装置、存储介质、电子装置 |
Non-Patent Citations (3)
| Title |
|---|
| CCYCCSDN: "将小程序的wxss转换成css", Retrieved from the Internet <URL:https://blog.csdn.net/sinat_23076629/article/details/81131472> * |
| 你不知道的巨蟹: "移动端布局方案—vw+rem", pages 1 - 3, Retrieved from the Internet <URL:https://www.cnblogs.com/tu-0718/p/10826846.html> * |
| 汪玉琼: "响应式网页的界面设计研究", 《中国优秀硕士学位论文全文数据库 信息科技辑》, no. 03 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115080027A (zh) * | 2022-08-24 | 2022-09-20 | 深圳市信润富联数字科技有限公司 | web页面自动适配方法、装置、设备及存储介质 |
| CN115080027B (zh) * | 2022-08-24 | 2023-01-06 | 深圳市信润富联数字科技有限公司 | web页面自动适配方法、装置、设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109032606B (zh) | 原生应用程序的编译处理方法、装置及终端 | |
| CN106569800B (zh) | 前端界面生成方法及装置 | |
| US20180364964A1 (en) | Method, device, and storage medium for displaying application page | |
| CN107423106B (zh) | 支持多框架语法的方法和装置 | |
| CN110874217B (zh) | 快应用的界面显示方法、装置及存储介质 | |
| EP4155982A1 (en) | Page display method and apparatus, and electronic device | |
| CN109710259B (zh) | 一种数据处理方法、装置及存储介质 | |
| US20200159789A1 (en) | Method and device for page display, and storage medium | |
| CN110704053B (zh) | 一种样式信息的处理方法及装置 | |
| CN107463372B (zh) | 一种数据驱动的页面更新方法和装置 | |
| CN113238752A (zh) | 代码生成方法、装置、电子设备及存储介质 | |
| CN105468606B (zh) | 网页保存的方法及装置 | |
| US11210449B2 (en) | Page display method and device and storage medium | |
| CN110865863A (zh) | 快应用的界面显示方法、装置及存储介质 | |
| CN112860255A (zh) | 页面适配方法及装置 | |
| CN112685269A (zh) | 数据的获取方法、装置、电子设备及存储介质 | |
| CN111383296B (zh) | 绘制轨迹的显示方法、装置及存储介质 | |
| CN107368562B (zh) | 页面的显示方法、装置及终端 | |
| CN111221613A (zh) | 程序调用方法及装置、存储介质 | |
| CN107832058B (zh) | 数据处理方法及装置 | |
| CN111079040A (zh) | 资源嗅探方法、装置、终端、服务器及存储介质 | |
| CN115658063A (zh) | 页面信息生成方法、装置、设备及存储介质 | |
| CN109491655A (zh) | 一种输入事件处理方法及装置 | |
| CN111338961B (zh) | 应用调试方法及装置、电子设备及存储介质 | |
| CN113391804A (zh) | 页面生成方法、装置、电子设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |