[发明专利]一种网页自适应布局方法、服务器及计算机可读存储介质

说明书

本发明涉及Web前端开发领域，揭露了一种网页自适应布局方法，该方法包括：将rem设置为CSS中元素width,height,margin,padding,left top属性的单位；当网页打开时，根据屏幕大小调整HTML元素的font‑size值，使得body中元素的属性值随font‑size值同步调整；计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果；根据对比结果优化body中元素的属性值，得到body中元素的优化后属性值；根据所述body中元素的优化后属性值生成优化页面。这样，通过上述方案可直接根据设计稿的尺寸转换成代码尺寸，只需要将终端宽度或高度作为判断基准，即可使页面的所有元素自动调整到合适的大小，页面上所有内容的布局与设计稿布局相同，完整还原设计搞比例。

技术领域

本发明涉及Web前端开发领域，尤其涉及一种网页自适应布局方法、服务器及计算机可读存储介质。

背景技术

当前，Web前端开发领域的工作者们，在遇到网页自适应布局问题时，主要采用内容区定宽布局和媒体查询、JavaScript动态计算宽度和高度、百分比布局、流式布局等方案，虽然这些方案在一定程度上优化了页面的布局情况，优化了视觉呈现效果，但是仍无法完整地还原设计稿的尺寸比例，或者需要对布局做微调，或者需要在较小屏幕下隐藏部分元素。比如对于流式布局方案，在页面布局的时候通过百分比来定义宽度，而高度大都是用像素(pixel，px)来固定住，所以在部分屏幕下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，甚至布局出现混乱，往往仅有几个尺寸的屏幕下呈现的效果是令人满意的，这无论是视觉设计师，还是网页用户，都是无法接受这种呈现效果的。

发明内容

有鉴于此，本发明提出一种网页自适应布局方法及服务器，可以直接根据设计稿的尺寸转换成代码尺寸，无需考虑设计稿具体的尺寸值，只需要设定当前页面是基于终端宽度或者基于终端高度来作为判断基准，即可使页面的所有元素自动调整到合适的大小，同时页面上所有内容的布局可以维持与设计稿的布局相同，完整地还原设计稿的比例，适配所有计算机(personal computer，PC)屏幕尺寸。

首先，为实现上述目的，本发明提出一种网页自适应布局方法，该方法应用于服务器，所述方法包括：

将rem设置为层叠样式表(Cascading Stylesheet，CSS)中元素width,height,margin,padding,left top属性的单位；

当网页打开时，根据屏幕大小调整超文本标记语言(Hyper Text MarkupLanguage，HTML)元素的font-size值，使得body中元素的属性值随font-size值同步调整；

计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果；

根据所述对比结果优化body中元素的属性值，得到body中元素的优化后属性值；

根据所述body中元素的优化后属性值生成优化页面。

可选地，所述计算设计稿宽高比和终端屏幕宽高比，并对比设计稿宽高比和终端屏幕宽高比得到对比结果的步骤，具体包括如下步骤：

获取所述设计稿的设计稿宽和设计稿高，根据设计稿宽除以设计稿高得到所述设计稿宽高比；

获取所述终端屏幕的屏宽和屏高，根据屏宽除以屏高得到所述终端屏幕宽高比；

对比所述设计稿宽高比和所述终端屏幕宽高比得到对比结果。

可选地，所述根据所述对比结果优化body元素的属性值，得到body中元素的优化后属性值的步骤，具体包括如下步骤：

当所述屏幕宽高比小于所述设计稿宽高比时，设置设计稿的最小宽度；