一种基于rem的页面自适应布局的方法及装置与流程

技术特征：
1.一种基于rem的页面自适应布局的方法，其特征在于，所述方法包括：确定基准画布，并根据原始设计图尺寸确定所述基准画布上显示的所有组件中每个所述组件的第一尺寸，每个所述组件的第一尺寸的单位为像素单位；根据预先确定出的自适应缩放方式，确定所述自适应缩放方式对应的转换单位，并基于所述转换单位将目标rem单位转换成100个所述像素单位所对应的目标值，所述目标值的单位为所述转换单位；将根节点字体大小单位设置为所述转换单位；确定以所述像素单位为单位的原始自适应视口范围，所述原始自适应视口范围包括原始视口宽度范围和/或原始视口高度范围；将所有所述组件的第一尺寸转换成以rem为单位的第二尺寸，以及将所述原始自适应视口范围转换成以rem为单位的目标自适应视口范围；根据所有所述组件的第二尺寸、所述根节点字体大小单位以及所述目标自适应视口范围，生成css样式文件。2.根据权利要求1所述的一种基于rem的页面自适应布局的方法，其特征在于，所述根据预先确定出的自适应缩放方式，确定所述自适应缩放方式对应的转换单位，包括：当所述自适应缩放方式为基于页面宽度的第一自适应方式时，确定所述自适应缩放方式对应的转换单位为页面视口宽度vw；当所述自适应缩放方式为基于页面高度的第二自适应方式时，确定所述自适应缩放方式对应的转换单位为页面视口高度vh。3.根据权利要求2所述的一种基于rem的页面自适应布局的方法，其特征在于，所述确定以所述像素单位为单位的原始自适应视口范围，包括：获取多媒体查询的结果，结合所述多媒体查询的结果以及确定出的所述自适应缩放方式，将视口的尺寸类型中与所述自适应缩放方式相匹配的目标尺寸类型的最大值及最小值设置为响应式断点；根据所述自适应缩放方式以及所述目标尺寸类型的最大值及最小值，设置用于显示所有所述组件的目标页面的尺寸范围，以确定以所述像素单位为单位的原始自适应视口范围。4.根据权利要求3所述的一种基于rem的页面自适应布局的方法，其特征在于，所述多媒体查询的结果包括：多个视口中每个视口的宽度范围和/或高度范围、多个页面中每个页面的宽度范围和/或高度范围、多个终端设备的设备参数中的至少一种；每个所述终端设备的设备参数包括宽度、高度、种类、分辨率中的一种或多种。5.根据权利要求3或4所述的一种基于rem的页面自适应布局的方法，其特征在于，所述根据所述自适应缩放方式以及所述目标尺寸类型的最大值及最小值，设置用于显示所有所述组件的目标页面的尺寸范围，包括：当所述自适应缩放方式为所述第一自适应方式时，将用于显示所有所述组件的目标页面的宽度值的最大值设置为所述目标尺寸类型的最大值并将所述目标页面的宽度值的最小值设置为所述目标尺寸类型的最小值；当所述自适应缩放方式为所述第二自适应方式时，将用于显示所有所述组件的目标页
面的高度值的最大值设置为所述目标尺寸类型的最大值并将所述目标页面的高度值的最小值设置为所述目标尺寸类型的最小值。6.根据权利要求1所述的一种基于rem的页面自适应布局的方法，其特征在于，在所述将根节点字体大小单位设置为所述转换单位之前，所述方法还包括：通过sass语法搭建sass工程，并根据所述sass工程确定所述像素单位与所述转换单位之间的转换关系；所述转换关系用于将获取到的任一根节点字体的尺寸转换为以所述转换单位为单位的尺寸。7.根据权利要求1所述的一种基于rem的页面自适应布局的方法，其特征在于，所述将所有所述组件的第一尺寸转换成以rem为单位的第二尺寸，以及将所述原始自适应视口范围转换成以rem为单位的目标自适应视口范围，包括：配置pxtorem工程，并通过webpack的postcss加载器结合postcss-pxtorem插件，将所有所述组件的第一尺寸转换成以rem为单位的第二尺寸，以及将所述原始自适应视口范围转换成以rem为单位的目标自适应视口范围。8.一种基于rem的页面自适应布局的装置，其特征在于，所述装置包括：确定模块，用于确定基准画布，并根据原始设计图尺寸确定所述基准画布上显示的所有组件中每个所述组件的第一尺寸，每个所述组件的第一尺寸的单位为像素单位；所述确定模块，还用于根据预先确定出的自适应缩放方式，确定所述自适应缩放方式对应的转换单位；转换模块，用于基于所述转换单位将目标rem单位转换成100个所述像素单位所对应的目标值，所述目标值的单位为所述转换单位；设置模块，用于将根节点字体大小单位设置为所述转换单位；所述确定模块，还用于确定以所述像素单位为单位的原始自适应视口范围，所述原始自适应视口范围包括原始视口宽度范围和/或原始视口高度范围；所述转换模块，还用于将所有所述组件的第一尺寸转换成以rem为单位的第二尺寸，以及将所述原始自适应视口范围转换成以rem为单位的目标自适应视口范围；生成模块，用于根据所有所述组件的第二尺寸、所述根节点字体大小单位以及所述目标自适应视口范围，生成css样式文件。9.一种基于rem的页面自适应布局的装置，其特征在于，所述装置包括：存储有可执行程序代码的存储器；与所述存储器耦合的处理器；所述处理器调用所述存储器中存储的所述可执行程序代码，执行如权利要求1-7任一项所述的基于rem的页面自适应布局的方法。10.一种计算机可存储介质，其特征在于，所述计算机存储介质存储有计算机指令，所述计算机指令被调用时，用于执行如权利要求1-7任一项所述的基于rem的页面自适应布局的方法。

技术总结
本发明公开了一种基于rem的页面自适应布局的方法及装置，该方法包括：确定基准画布，并确定所有组件的第一尺寸；根据自适应缩放方式，确定其对应的转换单位；将根节点字体大小单位设置为转换单位；确定原始自适应视口范围；将所有组件的第一尺寸转换成以rem为单位的第二尺寸以及将原始自适应视口范围转换成以rem为单位的目标自适应视口范围；根据所有组件的第二尺寸、根节点字体大小单位以及目标自适应视口范围，生成CSS样式文件。可见，实施本发明能够将组件的单位转换成rem单位并设置根节点字体大小单位，在终端设备上实现页面自适应布局，有利于减少页面自适应实现的复杂度，有利于提高多终端网页开发与维护的效率。有利于提高多终端网页开发与维护的效率。有利于提高多终端网页开发与维护的效率。


技术研发人员：梁培 易文峰 薛煜帅 付剑伟
受保护的技术使用者：南方电网深圳数字电网研究院有限公司
技术研发日：2021.09.14
技术公布日：2022/1/14