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

1.本发明涉及页面布局技术领域，尤其涉及一种基于rem的页面自适应布局的方法及装置。


背景技术：

2.随着多种不同屏幕尺寸的终端设备的兴起，需要让组件在不同尺寸的终端设备上呈现同样的内容与布局，以实现页面自适应的效果，进而达到较好的用户体验。
3.当前，实现页面自适应效果的方式通常有两种：一是基于多媒体查询的响应式技术检测视口分辨率，并基于检测到的视口分辨率在终端设备侧做代码处理，来展现不同的布局和内容，这种方式需要针对不同的屏幕尺寸，编写多套样式来展现不同的内容与布局，进而达到自适应的效果，增加了实现的复杂度；二是通过检测视口分辨率来判断当前访问的终端设备的种类，并请求服务层返回相匹配的页面进而达到自适应的效果，这种方式需要维护多个版本的样式文件，增加了实现复杂度。可见，如何提供一种新的内容页面自适应的方法以降低实现复杂度显得尤为重要。


技术实现要素：

4.本发明所要解决的技术问题在于，提供一种基于rem的页面自适应布局的方法及装置，能够通过将页面的所有组件的单位转换成rem单位并设置根节点大小单位，实现在不同的终端设备上实现页面自适应，能够降低页面自适应实现的复杂度，有利于提高多终端网页开发与维护的效率，有利于提高用户使用页面的体验感。
5.为了解决上述技术问题，本发明第一方面公开了一种基于rem的页面自适应布局的方法，所述方法包括：
6.确定基准画布，并根据原始设计图尺寸确定所述基准画布上显示的所有组件中每个所述组件的第一尺寸，每个所述组件的第一尺寸的单位为像素单位；
7.根据预先确定出的自适应缩放方式，确定所述自适应缩放方式对应的转换单位，并基于所述转换单位将目标rem单位转换成100个所述像素单位所对应的目标值，所述目标值的单位为所述转换单位；
8.将根节点字体大小单位设置为所述转换单位；
9.确定以所述像素单位为单位的原始自适应视口范围，所述原始自适应视口范围包括原始视口宽度范围和/或原始视口高度范围；
10.将所有所述组件的第一尺寸转换成以rem为单位的第二尺寸，以及将所述原始自适应视口范围转换成以rem为单位的目标自适应视口范围；
11.根据所有所述组件的第二尺寸、所述根节点字体大小单位以及所述目标自适应视口范围，生成css样式文件。
12.作为一种可选的实施方式，在本发明第一方面中，所述根据预先确定出的自适应缩放方式，确定所述自适应缩放方式对应的转换单位，包括：
13.当所述自适应缩放方式为基于页面宽度的第一自适应方式时，确定所述自适应缩放方式对应的转换单位为页面视口宽度vw；
14.当所述自适应缩放方式为基于页面高度的第二自适应方式时，确定所述自适应缩放方式对应的转换单位为页面视口高度vh。
15.作为一种可选的实施方式，在本发明第一方面中，所述确定以所述像素单位为单位的原始自适应视口范围，包括：
16.获取多媒体查询的结果，结合所述多媒体查询的结果以及确定出的所述自适应缩放方式，将视口的尺寸类型中与所述自适应缩放方式相匹配的目标尺寸类型的最大值及最小值设置为响应式断点；
17.根据所述自适应缩放方式以及所述目标尺寸类型的最大值及最小值，设置用于显示所有所述组件的目标页面的尺寸范围，以确定以所述像素单位为单位的原始自适应视口范围。
18.作为一种可选的实施方式，在本发明第一方面中，所述多媒体查询的结果包括：
19.多个视口中每个视口的宽度范围和/或高度范围、多个页面中每个页面的宽度范围和/或高度范围、多个终端设备的设备参数中的至少一种；
20.每个所述终端设备的设备参数包括宽度、高度、种类、分辨率中的一种或多种。
21.作为一种可选的实施方式，在本发明第一方面中，所述根据所述自适应缩放方式以及所述目标尺寸类型的最大值及最小值，设置用于显示所有所述组件的目标页面的尺寸范围，包括：
22.当所述自适应缩放方式为所述第一自适应方式时，将用于显示所有所述组件的目标页面的宽度值的最大值设置为所述目标尺寸类型的最大值并将所述目标页面的宽度值的最小值设置为所述目标尺寸类型的最小值；
23.当所述自适应缩放方式为所述第二自适应方式时，将用于显示所有所述组件的目标页面的高度值的最大值设置为所述目标尺寸类型的最大值并将所述目标页面的高度值的最小值设置为所述目标尺寸类型的最小值。
24.作为一种可选的实施方式，在本发明第一方面中，所述将根节点字体大小单位设置为所述转换单位之前，所述方法还包括：
25.通过sass语法搭建sass工程，并根据所述sass工程确定所述像素单位与所述转换单位之间的转换关系；
26.所述转换关系用于将获取到的任一根节点字体的尺寸转换为以所述转换单位为单位的尺寸。
27.作为一种可选的实施方式，在本发明第一方面中，所述将所有所述组件的第一尺寸转换成以rem为单位的第二尺寸，以及将所述原始自适应视口范围转换成以rem为单位的目标自适应视口范围，包括：
28.配置pxtorem工程，并通过webpack的postcss加载器结合postcss-pxtorem插件，将所有所述组件的第一尺寸转换成以rem为单位的第二尺寸，以及将所述原始自适应视口范围转换成以rem为单位的目标自适应视口范围。
29.本发明第二方面公开了一种基于rem的页面自适应布局的装置，所述装置包括：
30.确定模块，用于确定基准画布，并根据原始设计图尺寸确定所述基准画布上显示
的所有组件中每个所述组件的第一尺寸，每个所述组件的第一尺寸的单位为像素单位；
31.所述确定模块，还用于根据预先确定出的自适应缩放方式，确定所述自适应缩放方式对应的转换单位；
32.转换模块，用于基于所述转换单位将目标rem单位转换成100个所述像素单位所对应的目标值，所述目标值的单位为所述转换单位；
33.设置模块，用于将根节点字体大小单位设置为所述转换单位；
34.所述确定模块，还用于确定以所述像素单位为单位的原始自适应视口范围，所述原始自适应视口范围包括原始视口宽度范围和/或原始视口高度范围；
35.所述转换模块，还用于将所有所述组件的第一尺寸转换成以rem为单位的第二尺寸，以及将所述原始自适应视口范围转换成以rem为单位的目标自适应视口范围；
36.生成模块，用于根据所有所述组件的第二尺寸、所述根节点字体大小单位以及所述目标自适应视口范围，生成css样式文件。
37.作为一种可选的实施方式，在本发明第二方面中，所述确定模块根据预先确定出的自适应缩放方式，确定所述自适应缩放方式对应的转换单位的方式具体为：
38.当所述自适应缩放方式为基于页面宽度的第一自适应方式时，确定所述自适应缩放方式对应的转换单位为页面视口宽度vw；
39.当所述自适应缩放方式为基于页面高度的第二自适应方式时，确定所述自适应缩放方式对应的转换单位为页面视口高度vh。
40.作为一种可选的实施方式，在本发明第二方面中，所述确定模块确定以所述像素单位为单位的原始自适应视口范围的方式具体为：
41.获取多媒体查询的结果，结合所述多媒体查询的结果以及确定出的所述自适应缩放方式，将视口的尺寸类型中与所述自适应缩放方式相匹配的目标尺寸类型的最大值及最小值设置为响应式断点；
42.根据所述自适应缩放方式以及所述目标尺寸类型的最大值及最小值，设置用于显示所有所述组件的目标页面的尺寸范围，以确定以所述像素单位为单位的原始自适应视口范围。
43.作为一种可选的实施方式，在本发明第二方面中，所述多媒体查询的结果包括：
44.多个视口中每个视口的宽度范围和/或高度范围、多个页面中每个页面的宽度范围和/或高度范围、多个终端设备的设备参数中的至少一种；
45.每个所述终端设备的设备参数包括宽度、高度、种类、分辨率中的一种或多种。
46.作为一种可选的实施方式，在本发明第二方面中，所述确定模块根据所述自适应缩放方式以及所述目标尺寸类型的最大值及最小值，设置用于显示所有所述组件的目标页面的尺寸范围的方式具体为：
47.当所述自适应缩放方式为所述第一自适应方式时，将用于显示所有所述组件的目标页面的宽度值的最大值设置为所述目标尺寸类型的最大值并将所述目标页面的宽度值的最小值设置为所述目标尺寸类型的最小值；
48.当所述自适应缩放方式为所述第二自适应方式时，将用于显示所有所述组件的目标页面的高度值的最大值设置为所述目标尺寸类型的最大值并将所述目标页面的高度值的最小值设置为所述目标尺寸类型的最小值。
49.作为一种可选的实施方式，在本发明第二方面中，所述装置还包括：
50.搭建模块，用于在所述设置模块将根节点字体大小单位设置为所述转换单位之前，通过sass语法搭建sass工程；
51.所述确定模块，还用于根据所述sass工程确定所述像素单位与所述转换单位之间的转换关系；
52.所述转换关系用于将获取到的任一根节点字体的尺寸转换为以所述转换单位为单位的尺寸。
53.作为一种可选的实施方式，在本发明第二方面中，所述转换模块将所有所述组件的第一尺寸转换成以rem为单位的第二尺寸，以及将所述原始自适应视口范围转换成以rem为单位的目标自适应视口范围的方式具体为：
54.配置pxtorem工程，并通过webpack的postcss加载器结合postcss-pxtorem插件，将所有所述组件的第一尺寸转换成以rem为单位的第二尺寸，以及将所述原始自适应视口范围转换成以rem为单位的目标自适应视口范围。
55.本发明第三方面公开了另一种基于rem的页面自适应布局的装置，所述装置包括：
56.存储有可执行程序代码的存储器；
57.与所述存储器耦合的处理器；
58.所述处理器调用所述存储器中存储的所述可执行程序代码，执行本发明第一方面公开的基于rem的页面自适应布局的方法。
59.本发明第四方面公开了一种计算机可存储介质，所述计算机存储介质存储有计算机指令，所述计算机指令被调用时，用于执行本发明第一方面公开的基于rem的页面自适应布局的方法。
60.与现有技术相比，本发明实施例具有以下有益效果：
61.本发明实施例中，确定基准画布，并根据原始设计图尺寸确定基准画布上显示的所有组件中每个组件的第一尺寸，每个组件的第一尺寸的单位为像素单位；根据预先确定出的自适应缩放方式，确定自适应缩放方式对应的转换单位，并基于转换单位将目标rem单位转换成100个像素单位所对应的目标值，目标值的单位为转换单位；将根节点字体大小单位设置为转换单位；确定以像素单位为单位的原始自适应视口范围，原始自适应视口范围包括原始视口宽度范围和/或原始视口高度范围；将所有组件的第一尺寸转换成以rem为单位的第二尺寸，以及将原始自适应视口范围转换成以rem为单位的目标自适应视口范围；根据所有组件的第二尺寸、根节点字体大小单位以及目标自适应视口范围，生成css样式文件。可见，实施本发明有利于降低页面开发与维护的复杂度，有利于提高多终端网页开发与维护的效率，有利于便捷的实现页面动态自适应，进而有利于提高用户使用页面的体验感。
附图说明
62.为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
63.图1是本发明实施例公开的一种基于rem的页面自适应布局的方法的流程示意图；
64.图2是本发明实施例公开的另一种基于rem的页面自适应布局的方法的流程示意图；
65.图3是本发明实施例公开的一种基于rem的页面自适应布局装置的结构示意图；
66.图4是本发明实施例公开的另一种基于rem的页面自适应布局装置的结构示意图；
67.图5是本发明实施例公开的又一种基于rem的页面自适应布局装置的结构示意图。
具体实施方式
68.为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
69.本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、装置、产品或端没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或端固有的其他步骤或单元。
70.在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本发明的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
71.本发明公开了一种基于rem的页面自适应布局的方法及装置，有利于降低页面开发与维护的复杂度，有利于提高多终端网页开发与维护的效率，有利于便捷的实现页面动态自适应，进而有利于提高用户使用页面的体验感。以下分别进行详细说明。
72.实施例一
73.请参阅图1，图1是本发明实施例公开的一种基于rem的页面自适应布局的方法的流程示意图。其中，图1所描述的一种基于rem的页面自适应布局的方法可以应用于有显示屏幕的终端设备中，如pc(personal computer，个人计算机)、笔记本电脑、平板电脑、移动手机等，本发明实施例不做限定。如图1所示，该基于rem的页面自适应布局的方法可以包括以下操作：
74.101、确定基准画布，并根据原始设计图尺寸确定基准画布上显示的所有组件中每个组件的第一尺寸，每个组件的第一尺寸的单位为像素单位。
75.本发明实施例中，基准画布上显示的组件包括文字、图片等，本发明实施例不作限定。其中，在基准画布上显示的所有组件的尺寸都是原始设计图中以像素(pixel)单位进行开发的。其中，像素(pixel)是指基本原色素及其灰度的基本编码，像素单位为相对长度单位。
76.102、根据预先确定出的自适应缩放方式，确定自适应缩放方式对应的转换单位，并基于转换单位将目标rem单位转换成100个像素单位所对应的目标值，目标值的单位为转换单位。
77.本发明实施例中，rem(root em)单位是相对于根元素(html)的相对长度单位，可
以根据根元素(html)对应的数值大小进而对页面中的所有字体大小进行设置，其中，根据根元素(html)对应的数值大小进而对页面中的所有字体大小进行设置的方式可以是以成比例的方式进行设置。
78.本发明实施例中，自适应缩放方式包括基于页面宽度的自适应方式以及基于页面高度的自适应方式。可选的，该自适应缩放方式可以通过显示该页面的移动设备当前的使用状态或朝向进行确定，例如，当移动手机当前的屏幕情况为竖屏情况(例如：移动手机竖向摆放并将屏幕朝向锁定为竖向)时，确定当前的自适应缩放方式为基于页面高度的自适应方式。可选的，自适应缩放方式还可以通过多媒体查询进行确定，例如，当多媒体的查询结果用于表示显示该页面的终端设备为电脑pc端时，获取该电脑pc端的设备参数，其中，设备参数可以包括该电脑pc端的型号、该电脑pc端的分辨率中的一种或多种，并根据获取得到的该电脑pc端的设备参数确定当前的自适应缩放方式。
79.本发明实施例中，自适应缩放方式可以通过检测显示该页面的终端设备的屏幕情况进行确定，也可以通过获取显示该页面的终端设备的设备参数进行确定，通过检测终端设备的屏幕情况以及获取终端设备的设备参数进行自适应缩放方式的确定，有利于提高确定自适应缩放方式的准确性，同时也有利于提高确定该自适应缩放方式的便捷性。
80.在另一个可选的实施例中，根据预先确定出的自适应缩放方式，确定自适应缩放方式对应的转换单位，可以包括：
81.当自适应缩放方式为基于页面宽度的第一自适应方式时，确定自适应缩放方式对应的转换单位为页面视口宽度vw；
82.当自适应缩放方式为基于页面高度的第二自适应方式时，确定自适应缩放方式对应的转换单位为页面视口高度vh。
83.本发明实施例中，视口(viewport)为终端设备的显示屏幕中显示页面内容的屏幕区域，视口大小为终端设备的显示屏幕中显示页面内容的屏幕区域的尺寸大小，页面视口宽度vw(viewport width)与页面视口高度vh(viewport height)为视口单位。进一步可选的，当在电脑pc端进行页面自适应布局时，视口指的是在该电脑pc端的显示屏中浏览器的可视区域；当在移动端进行页面自适应布局时，视口包括布局视口(layout viewport)、视觉视口(visual viewport)、理想视口(ideal viewport)三种。其中，布局视口(layout viewport)指的是页面的尺寸大小，根据不同类型的终端设备，每个类型的终端设备都有该类型的终端设备对应的尺寸大小；视觉视口(visual viewport)指的是在终端设备上，用户看到的页面的区域，其中，该用户看到的页面的区域可以等同于终端设备上浏览器窗口的尺寸大小；理想视口(ideal viewport)指的是在终端设备的浏览器上最理想的浏览及阅读的尺寸大小，在该理想视口的情况下，布局视口的大小与终端设备的屏幕尺寸大小一致，即用户能够不需上下滚动页面或左右滑动页面即可浏览所有页面内容。在本发明实施例中，当在移动端进行页面自适应布局时，页面自适应布局针对的对象为布局视口(layout viewport)。
84.本发明实施例中，可选的，目标rem单位可以为1rem，当确定出自适应缩放方式为基于页面宽度的第一自适应方式时，该第一自适应方式对应的转换单位为页面视口宽度vw时，确定将1rem转换成100个像素单位所对应的页面视口宽度vw的值。例如，1rem转换成100个像素单位所对应的页面视口宽度vw的值可以是1rem＝6.25vw＝100px。
85.可见，本发明实施例能够根据预先确定出的自适应缩放方式，确定自适应缩放方式对应的转换单位，能够降低页面开发与维护的复杂度，有利于提高多终端网页开发与维护的效率，有利于提高页面自适应布局的便捷度。
86.103、将根节点字体大小单位设置为转换单位。
87.本发明实施例中，根节点字体大小可以通过根据网页根元素(html元素)的字段font-size进行设置，其设置的基准值可以为开发人员设计网页页面时预先设置出的该网页页面的根节点的字体大小的初始值。
88.本发明实施例中，转换单位包括页面视口宽度vw以及页面视口高度vh。当确定出的转换单位为页面视口宽度vw时，将根节点字体大小单位设置为页面视口宽度vw；当确定出的转换单位为页面视口高度vh时，将根节点字体大小单位设置为页面视口高度vh。
89.可见，本发明实施例中通过将根节点字体大小单位设置为转换单位，其中，转换单位包括页面视口宽度vw与页面视口高度vh，当视口的尺寸大小改变时，页面中所有组件的尺寸大小跟随该视口的大小的改变而改变，进而页面中的所有组件可以实现自动缩放，这样可以通过改变视口的大小，进而对页面中的组件动态地进行尺寸大小的调整，能够减少工作人员的工作量，有利于提高多终端网页开发与维护的效率，进而有利于提高页面自适应布局的便捷度。
90.104、确定以像素单位为单位的原始自适应视口范围，原始自适应视口范围包括原始视口宽度范围和/或原始视口高度范围。
91.本发明实施例中，原始自适应视口范围为在终端设备的显示屏幕上用于显示所有组件的目标页面的尺寸范围。其中，该原始自适应视口范围的单位是像素单位，通过确定该以像素单位为单位的原始自适应视口范围，能够确定页面的尺寸大小的范围，有利于提高多终端网页开发与维护的效率，有利于提高页面自适应布局的准确性，进而有利于提高用户使用页面的体验感。
92.在另一个可选的实施例中，确定以像素单位为单位的原始自适应视口范围，可以包括：
93.获取多媒体查询的结果，结合多媒体查询的结果以及确定出的自适应缩放方式，将视口的尺寸类型中与自适应缩放方式相匹配的目标尺寸类型的最大值及最小值设置为响应式断点；
94.根据自适应缩放方式以及目标尺寸类型的最大值及最小值，设置用于显示所有组件的目标页面的尺寸范围，以确定以像素单位为单位的原始自适应视口范围。
95.在该可选的实施例中，尺寸类型是根据自适应缩放方式确定的，其中，尺寸类型包括宽度尺寸类型以及高度尺寸类型。可选的，当确定出的自适应缩放方式为基于页面宽度的第一自适应方式时，确定视口的尺寸类型为宽度尺寸类型；当确定出的自适应缩放方式为基于页面高度的第二自适应方式时，确定视口的尺寸类型为高度尺寸类型。进一步的，当确定出的视口的尺寸类型为宽度尺寸类型时，将视口的宽度尺寸类型中与基于页面宽度的第一自适应方式相匹配的目标尺寸类型的最大值及最小值设置为响应式断点。其中，响应式断点用于表示页面调整的最大值及最小值，例如，当视口的宽度最大值达到响应式断点的数值时，页面将会自动进行自适应的调整。这样，通过设置响应式断点，能够针对在不同的终端设备或不同尺寸的显示屏幕上主动调整网页页面的显示方法及网页页面的布局，让
网页页面能够在各类终端设备或各类显示屏幕上进行页面调整，能够减少页面自适应实现的复杂度，有利于减少页面布局紊乱、出现乱码的情况，有利于提高多终端网页开发与维护的效率，有利于提高确定自适应缩放方式的准确性，进而有利于提高用户使用网页的体验感。
96.可见，该可选的实施例中，通过结合多媒体查询的结果及确定出的自适应缩放方式，将视口的尺寸类型以及与自适应缩放方式相匹配的目标尺寸的最大值及最小值设置为响应式断点，进而设置用于显示所有组件的目标页面的尺寸范围，以确定出以像素单位为单位的原始自适应视口范围，能够减少页面自适应实现的复杂度，能够提高确定自适应缩放方式的准确性，有利于提高多终端网页开发与维护的效率，进而有利于提高用户使用网页的体验感。
97.在又一个可选的实施例中，多媒体查询的结果包括：
98.多个视口中每个视口的宽度范围和/或高度范围、多个页面中每个页面的宽度范围和/或高度范围、多个终端设备的设备参数中的至少一种；
99.每个终端设备的设备参数包括宽度、高度、种类、分辨率中的一种或多种。
100.在该可选的实施例中，每个终端设备的设备参数包括该终端设备的宽度、该终端设备的高度、该终端设备的种类(如pc端、平板电脑、移动手机)、该终端设备的分辨率。这样，通过获取多媒体查询的结果，能够多方位地获取用于显示所有组件的目标页面的视口的宽度范围和/或高度范围、页面的宽度范围和/或高度范围、终端设备的设备参数，能够提高确定自适应缩放方式的准确性，能够减少页面自适应实现的复杂度，减少页面开发工作人员的工作量，有利于提高多终端网页开发与维护的效率，进而有利于提高用户使用网页的体验感。
101.在又一个可选的实施例中，根据自适应缩放方式以及目标尺寸类型的最大值及最小值，设置用于显示所有组件的目标页面的尺寸范围，可以包括：
102.当自适应缩放方式为第一自适应方式时，将用于显示所有组件的目标页面的宽度值的最大值设置为目标尺寸类型的最大值并将目标页面的宽度值的最小值设置为目标尺寸类型的最小值；
103.当自适应缩放方式为第二自适应方式时，将用于显示所有组件的目标页面的高度值的最大值设置为目标尺寸类型的最大值并将目标页面的高度值的最小值设置为目标尺寸类型的最小值。
104.该可选的实施例中，尺寸类型包括宽度尺寸类型以及高度尺寸类型。当自适应缩放方式为基于页面宽度的第一自适应方式时，将目标尺寸类型确定为宽度尺寸类型，将用于显示所有组件的目标页面的宽度值的最大值设置为目标尺寸类型的最大值并将目标页面的宽度值的最小值设置为目标尺寸类型的最小值。这样，通过将显示所有组件的目标页面的最大值及最小值设置为目标尺寸类型的最大值及最小值，能够确定页面的尺寸范围，进而能够确定原始自适应视口范围，能够减少页面自适应实现的复杂度，有利于提高多终端网页开发与维护的效率，有利于提高页面自适应布局的准确性，进而有利于提高用户使用网页的体验感。
105.105、将所有组件的第一尺寸转换成以rem为单位的第二尺寸，以及将原始自适应视口范围转换成以rem为单位的目标自适应视口范围。
106.本发明实施例中，所有组件的第一尺寸的单位为像素单位，原始自适应视口范围的单位为像素单位，将页面中所有组件从以像素单位为单位的第一尺寸转换成以rem为单位的第二尺寸，并且将以像素单位为单位的原始自适应视口范围转换成以rem为单位的目标自适应视口范围。这样，通过将页面中的所有组件以及自适应视口范围都转换成以rem为单位，能够确保页面中的所有组件及自适应视口范围的单位的统一性，能够降低页面自适应布局的复杂度，进而能够减少工作人员的工作量，有利于提高多终端网页开发与维护的效率，能够提高页面自适应布局的准确性及便捷性，进而有利于提高用户使用网页的体验感。
107.106、根据所有组件的第二尺寸、根节点字体大小单位以及目标自适应视口范围，生成css样式文件。
108.本发明实施例中，css样式文件(cascading style sheets，层叠样式表)，是用于表现超文本标记语言、可扩展标记语言等文件样式的计算机语言。css样式文件为超文本标记语言提供了一种样式描述，定义了其中元素的显示方式。css样式文件不仅能够静态地修饰网页，进一步的，通过该css样式文件还能够配合各种脚本语言，动态地对网页页面中的各元素组件进行布局，能够通过修改页面中的一个小样式并更新与该css样式文件相关的所有页面元素，动态地进行调整页面。
109.本发明实施例中，通过页面中所有以rem为单位的第二尺寸的组件、页面中根节点字体大小单位以及以rem为单位的目标自适应视口范围，生成css样式文件，该css样式文件通过只改变该根节点字体大小单位，即可实现页面中所有组件的大小跟随该改变后的根节点字体大小单位的改变而调整，并且结合以rem为单位目标自适应视口范围，能够减少因视口大小超出自适应视口范围进而导致页面布局失控的情况(例如：页面过大或过小)，能够使页面在各种终端设备的显示屏幕上呈现优良的布局，有利于提高多终端网页开发与维护的效率，能够提高页面自适应布局的准确性及便捷性，进而有利于提高用户使用网页的体验感。
110.在另一个可选的实施例中，将所有述组件的第一尺寸转换成以rem为单位的第二尺寸，以及将原始自适应视口范围转换成以rem为单位的目标自适应视口范围，可以包括：
111.配置pxtorem工程，并通过webpack的postcss加载器结合postcss-pxtorem插件，将所有组件的第一尺寸转换成以rem为单位的第二尺寸，以及将原始自适应视口范围转换成以rem为单位的目标自适应视口范围。
112.该可选的实施例中，通过配置pxtorem工程，能够将页面中的所有以像素单位为单位的第一尺寸的组件统一转换成以rem单位的第二尺寸的组件，同时将以像素单位为单位的原始自适应视口范围转换成以rem为单位的目标自适应视口范围，能够确保页面中的所有组件以及自适应视口范围的单位统一都以rem为单位，能够保证页面中所有组件的单位的统一性，能够降低工作人员进行页面自适应布局的复杂度，进而能够减少工作人员的工作量，能够提高单位转换的效率，能够提高页面自适应布局的准确性及便捷性，进而有利于提高用户使用网页的体验感。
113.可见，实施图1所描述的一种基于rem的页面自适应布局的方法能够通过根据基准画布确定基准画布上所有组件的第一尺寸，所有组件的第一尺寸的单位为像素单位，根据预先确定出的自适应缩放方式及该自适应缩放方式对应的转换单位，将根节点字体大小单
位设置为该转换单位，继而确定以像素单位为单位的原始自适应视口范围，将所有组件的第一尺寸转换为以rem为单位的第二尺寸并且将所有原始自适应视口范围转换成以rem为单位的目标自适应视口范围，根据所有组件的第二尺寸、根节点字体大小单位以及目标自适应视口范围生成css样式文件，在不同的终端设备上实现页面自适应布局，能够使页面在不同终端设备上呈现优良的布局形式，有利于提高多终端网页开发与维护的效率，能够提高页面自适应布局的准确性及便捷性，进而有利于提高用户使用网页的体验感。
114.实施例二
115.请参阅图2，图2是本发明实施例公开的一种基于rem的页面自适应布局的方法的流程示意图。其中，图2所描述的基于rem的页面自适应布局的方法可以应用于有显示屏幕的终端设备中，如pc(personal computer，个人计算机)，笔记本电脑，平板电脑，移动手机等，本发明实施例不做限定。如图2所示，该基于rem的页面自适应布局的方法可以包括以下操作：
116.201、确定基准画布，并根据原始设计图尺寸确定基准画布上显示的所有组件中每个组件的第一尺寸，每个组件的第一尺寸的单位为像素单位。
117.202、根据预先确定出的自适应缩放方式，确定自适应缩放方式对应的转换单位，并基于转换单位将目标rem单位转换成100个像素单位所对应的目标值，目标值的单位为转换单位。
118.203、通过sass语法搭建sass工程，并根据sass工程确定像素单位与转换单位之间的转换关系；该转换关系用于将获取到的任一根节点字体的尺寸转换为以转换单位为单位的尺寸。
119.本发明实施例中，sass(英文全称：syntactically awesome stylesheets)是用于开发css样式文件(cascading style sheets，层叠样式表)的语言，是对css样式文件的语法的一种扩充，能够有效地实现动态改变css样式文件。
120.本发明实施例中，通过sass语法搭建sass工程，能够通过该sass工程确定像素单位与转换单位之间的转换关系，该转换关系用于将获取到的任一根节点字体的尺寸转换为以转换单位为单位的尺寸。进一步的，通过该sass工程，能够确定基于基准画布时，将目标像素单位转换成rem单位所对应的第一目标值，该第一目标值的单位为rem单位。
121.可见，本发明实施例中，能够通过sass语法搭建sass工程，并根据sass工程确定像素单位与转换单位之间的转换关系，该转换关系用于将获取到的任一根节点字体的尺寸转换为以转换单位为单位的尺寸，能够确保页面中单位的统一性，能够降低工作人员进行页面自适应布局的复杂度，进而能够减少工作人员的工作量，能够提高页面自适应布局的准确性及便捷性，进而有利于提高用户使用网页的体验感。
122.204、将根节点字体大小单位设置为转换单位。
123.205、确定以像素单位为单位的原始自适应视口范围，原始自适应视口范围包括原始视口宽度范围和/或原始视口高度范围。
124.206、将所有组件的第一尺寸转换成以rem为单位的第二尺寸，以及将原始自适应视口范围转换成以rem为单位的目标自适应视口范围。
125.207、根据所有组件的第二尺寸、根节点字体大小单位以及目标自适应视口范围，生成css样式文件。
126.本发明实施例中，针对步骤201-步骤202以及步骤204-步骤207的其它描述，请参照实施例一种针对步骤101-步骤106的详细描述，本发明实施例不再赘述。
127.可见，实施图2所描述的一种基于rem的页面自适应布局的方法能够通过根据基准画布确定基准画布上所有组件的第一尺寸，所有组件的第一尺寸的单位为像素单位，根据预先确定出的自适应缩放方式及该自适应缩放方式对应的转换单位，通过sass语法搭建sass工程，确定像素单位与转换单位之间的转换关系，将根节点字体大小单位设置为该转换单位，继而确定以像素单位为单位的原始自适应视口范围，将所有组件的第一尺寸转换为以rem为单位的第二尺寸并且将所有原始自适应视口范围转换成以rem为单位的目标自适应视口范围，根据所有组件的第二尺寸、根节点字体大小单位以及目标自适应视口范围生成css样式文件，在不同的终端设备上实现页面自适应布局，能够使页面在不同终端设备上呈现优良的布局形式，能够降低页面自适应布局的复杂度，有利于提高多终端网页开发与维护的效率，能够提高页面自适应布局的准确性及便捷性，进而有利于提高用户使用网页的体验感。
128.实施例三
129.请参阅图3，图3是本发明实施例公开的一种基于rem的页面自适应布局的装置的结构示意图。其中，图3所描述的基于rem的页面自适应布局的装置可以应用于有显示屏幕的终端设备中，如pc(personal computer，个人计算机)，笔记本电脑，平板电脑，移动手机等，本发明实施例不做限定。图3所示的装置用于实现实施例一中所描述的方法。如图3所示，该基于rem的页面自适应布局的装置可以包括：
130.确定模块301，用于确定基准画布，并根据原始设计图尺寸确定基准画布上显示的所有组件中每个组件的第一尺寸，每个组件的第一尺寸的单位为像素单位。
131.确定模块301，还用于根据预先确定出的自适应缩放方式，确定自适应缩放方式对应的转换单位。
132.转换模块302，用于基于确定模块301确定出的转换单位将目标rem单位转换成100个像素单位所对应的目标值，目标值的单位为转换单位。
133.设置模块303，用于将根节点字体大小单位设置为转换单位。
134.确定模块301，还用于确定以像素单位为单位的原始自适应视口范围，原始自适应视口范围包括原始视口宽度范围和/或原始视口高度范围。
135.转换模块302，还用于将所有组件的第一尺寸转换成以rem为单位的第二尺寸，以及将原始自适应视口范围转换成以rem为单位的目标自适应视口范围。
136.生成模块304，用于根据所有组件的第二尺寸、根节点字体大小单位以及目标自适应视口范围，生成css样式文件。
137.可见，实施图3所描述的装置能够降低页面开发与维护的复杂度，有利于提高多终端网页开发与维护的效率，有利于便捷的实现页面动态自适应。
138.在一个可选的实施例中，如图3所示，确定模块301根据预先确定出的自适应缩放方式，确定自适应缩放方式对应的转换单位的具体方式可以为：
139.当自适应缩放方式为基于页面宽度的第一自适应方式时，确定自适应缩放方式对应的转换单位为页面视口宽度vw；
140.当自适应缩放方式为基于页面高度的第二自适应方式时，确定自适应缩放方式对
应的转换单位为页面视口高度vh。
141.可见，实施图3所描述的装置能够根据预先确定出的自适应缩放方式，确定自适应缩放方式对应的转换单位，有利于提高多终端网页开发与维护的效率，有利于提高页面自适应布局的便捷度。
142.在另一个可选的实施例中，如图3所示，确定模块301确定以像素单位为单位的原始自适应视口范围的具体方式可以为：
143.获取多媒体查询的结果，结合多媒体查询的结果以及确定出的自适应缩放方式，将视口的尺寸类型中与自适应缩放方式相匹配的目标尺寸类型的最大值及最小值设置为响应式断点；
144.根据自适应缩放方式以及目标尺寸类型的最大值及最小值，设置用于显示所有组件的目标页面的尺寸范围，以确定以像素单位为单位的原始自适应视口范围。
145.可选的，多媒体查询的结果包括多个视口中每个视口的宽度范围和/或高度范围、多个页面中每个页面的宽度范围和/或高度范围、多个终端设备的设备参数中的至少一种；
146.每个终端设备的设备参数包括宽度、高度、种类、分辨率中的一种或多种。
147.可见，实施图3所描述的装置能够减少页面自适应实现的复杂度，能够减少页面自适应实现的复杂度，有利于减少页面布局紊乱的情况，有利于提高多终端网页开发与维护的效率，有利于提高确定自适应缩放方式的准确性，进而有利于提高用户使用网页的体验感。
148.在又一个可选的实施例中，如图3所示，确定模块301根据自适应缩放方式以及目标尺寸类型的最大值及最小值，设置用于显示所有组件的目标页面的尺寸范围的具体方式可以为：
149.当自适应缩放方式为第一自适应方式时，将用于显示所有组件的目标页面的宽度值的最大值设置为目标尺寸类型的最大值并将目标页面的宽度值的最小值设置为目标尺寸类型的最小值；
150.当自适应缩放方式为第二自适应方式时，将用于显示所有组件的目标页面的高度值的最大值设置为目标尺寸类型的最大值并将目标页面的高度值的最小值设置为目标尺寸类型的最小值。
151.可见，实施图3所描述的装置通过配置pxtorem工程，能够将页面中的所有以像素单位为单位的第一尺寸的组件统一转换成以rem单位的第二尺寸的组件，同时将以像素单位为单位的原始自适应视口范围转换成以rem为单位的目标自适应视口范围，能够保证页面中所有组件的单位的统一性，能够降低工作人员进行页面自适应布局的复杂度，能够提高单位转换的效率，能够提高页面自适应布局的准确性及便捷性，进而有利于提高用户使用网页的体验感。
152.在又一个可选的实施例中，如图3所示，转换模块302将所有组件的第一尺寸转换成以rem为单位的第二尺寸，以及将原始自适应视口范围转换成以rem为单位的目标自适应视口范围的具体方式可以为：
153.配置pxtorem工程，并通过webpack的postcss加载器结合postcss-pxtorem插件，将所有组件的第一尺寸转换成以rem为单位的第二尺寸，以及将原始自适应视口范围转换成以rem为单位的目标自适应视口范围。
only memory，rom)、随机存储器(random access memory，ram)、可编程只读存储器(programmable read-only memory，prom)、可擦除可编程只读存储器(erasable programmable read only memory，eprom)、一次可编程只读存储器(one-time programmable read-only memory，otprom)、电子抹除式可复写只读存储器(electrically-erasable programmable read-only memory，eeprom)、只读光盘(compact disc read-only memory，cd-rom)或其他光盘存储器、磁盘存储器、磁带存储器、或者能够用于携带或存储数据的计算机可读的任何其他介质。
170.最后应说明的是：本发明实施例公开的一种基于rem的页面自适应布局的方法及装置所揭露的仅为本发明较佳实施例而已，仅用于说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解；其依然可以对前述各项实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或替换，并不使相应的技术方案的本质脱离本发明各项实施例技术方案的精神和范围。