CN110837617A 一种网页自适应布局方法、服务器及计算机可读存储介质 （平安科技（深圳）有限公司）

道福安社区益田路5033号平安金融中本发明涉及Web前端开发领域，揭露了一种整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整；计算设计稿宽2将rem设置为CSS中元素width,height,margin,padding,lef计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高2.如权利要求1所述的网页设计稿自适应布局方法，所述计算设计稿宽高比和终端屏获取所述设计稿的设计稿宽和设计稿高，根据设计稿宽3.如权利要求1所述的网页设计稿自适应布局方法，所述根据所述对比结果优化body4.如权利要求3所述的网页设计稿自适应布局方法，所述当所述屏幕宽高比小于所述5.如权利要求3所述的网页设计稿自适应布局方法，所述当屏幕宽高比大于所述设计3所述处理器执行时实现如权利要求1-8中任一项所述的网页设计稿自适应布局方法的步至少一个处理器执行如权利要求1-8中任一项所述网页设4宽度或者基于终端高度来作为判断基准，即可使页面的所有元素自动调整到合适的大小，[0005]将rem设置为层叠样式表(CascadingStylesheet，CSS)中元素width,height,margin,padding,lefttop属性的[0006]当网页打开时，根据屏幕大小调整超文本标记语言(HyperTextMarkup计稿宽高比；5应布局系统被所述处理器执行时实现如上述的网页存储介质存储有网页自适应布局系统，所述网页自适应布局系统可被至少一个处理器执61237独立的服务器，也可以是多个服务器所组成的服务器集群。所述网络3可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(GlobalSystemofMobilecommunication，GSM)、宽带码分多址(WidebandCodeDivisionMultipleAccess，可以是所述服务器2的外部存储设备，例如该服务器2上配备的插接式硬盘，智能存储卡8[0058]所述处理器12在一些实施例中可以是中央处理器(CentralProcessingUnit，务器2的总体操作，例如执行与所述移动终端1进行数据交互或者通信相关的控制和处理[0063]本实施例中，所述网页自适应布局系统200包括一系列的存储于存储器11上的计[0065]所述设置模块201，用于将rem设置为CSS中元素width,height,margin,padding,现不同终端屏幕下网页呈现的自适应布局，因此，将rem作为css中元素width、height、size值的大小随着屏幕大小变化。因此，根据屏幕大小动态地调整HTML元素的font-size9[0073]在实施例中，所述设置模块201还用于当所述屏幕宽高比小于所述设计稿宽高比[0075]所述设置模块201还用于当所述屏幕宽高比大于所述设计稿宽高比时，缩放设计实际显示的设计稿宽度赋值于body元素，计算并设置新的HTML元素font-size值，最后将假设当前值为24px，则font-size值＝当前值*(设计稿宽高比/屏幕宽高比)＝24px*打开时，根据屏幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-现不同终端屏幕下网页呈现的自适应布局，因此，将rem作为CSS中元素width、height、size值的大小随着屏幕大小变化。因此，根据屏幕大小动态地调整HTML元素的font-size实际显示的设计稿宽度赋值于body元素，计算并设置新的HTML元素font-size值，最后将假设当前值为24px，则font-size值＝当前值*(设计稿宽高比/屏幕宽高比)＝24px*稿具体的尺寸值，只需要设定当前页面是基于终端宽度或者基于终端高度来作为判断基幕大小调整HTML元素的font-size值，使得body中元素的属性值随font-size值同步调整；[0110]如图6所示，是本发明网页自适应布局方法第二实施例的流程示意图。本实施例出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储