页面适配让页面在不同的屏幕分辨率下可以正常显示，使页面布局不会乱，产品设计在做页面适配时需要注意哪些内容呢？

刚开始做页面适配时懵懵懂懂只知道我希望我的产品页面在不同分辨率下都可以正常显示以提高用户体验。

但傻傻弄不清当前技术前景下能适配到什么程度，产品Dog /Designer需要定义哪些具体细节，与UI设计师各自该定义什么，如何协作？

经过了一个项目再加上自己琢磨，总结一下：

页面适配的目的

页面适配是指页面在不同的屏幕分辨率下可以正常显示(页面布局不会乱)，或用户在放大或缩小浏览器显示区域时页面仍然可以正常显示。

作为产品, 以上述目的为需求向研发提出是第一步。接下来，就得和研发讨论更多细节。需要根研发讨论就得先了解下研发的技术背景，不然不但有从Designer被虐成Dog的风险，而且没法把需求落地。

目前主要有两种页面适配方式：自式应布局和响应式布局。以下是两种方式的简单描述：

自适应布局与响应式布局

自适应布局(Adaptive Design)： 页面根据不同的屏幕分辨率自动调整尺寸，但页面布局基本不会变化。

实例：http://www.ctrip.com/

响应式布局(Responsive Design)： 页面也会根据屏幕分辨率自动调整尺寸，但不同的分辨率范围会加载不同的CSS(说人话就是，不同的分辨率下用户看到的页面布局可能是不同的)。比如1024px~1920px时，导航菜单在页面左侧，600px~800px时导航菜单显示为图标且位于页面右上方，点击图标后显示导航。

实例： https://www.microsoft.com/zh-cn/

在网络上找到以下图片对自适应布局与响应式布局描述得很形象：

产品在页面适配中需要定义的内容

无论是自适应布局还是响应式布局都只是实现页面适配的方法而已，也许再过三五年会出现另一种更先进的实现方式。产品了解技术背景后需要以用户的视角去定义需求。页面适配中产品需要定义的需求如下：

1. 屏幕分辨率适配范围

例如我们项目为SaaS ERP系统，不太考虑移动端应用，而一般笔记本和台式机分辨率(宽度)在1024~1920间，所以定义适配范围为1024~1920。也就是用户用宽度在这之间的屏幕去浏览网页时要求页面布局不会乱。

范围定义后，UI设计师一般会按出最小分辨率如1024出高保真设计稿。前端实现按百分比定义页面元素显示宽度。当浏览器可视区大于1024时，页面元素宽度如按纽宽度按百分比放大显示就可以了。

2. 小于适配范围最小宽度时处理方式

一般产品要求处理方式为不继续缩小，即页面布局及页面元素大小保持不变。如果可视区小于该分辨率，浏览器显示滚动条，用户此时需要滑动滚动条查看页面内容。www.taobao.com就是这种效果。

3. 不同分辨率下字体的处理方式

可视区放大或缩小时字体大小是否需要跟着按比率缩放。要求不同对应的前端处理方式不同。我们项目为简化研发，定义为不需要。前端用px固定字体大小即可。如果需要，字体大小则需要用em或rem定义。

4. 不同分辨率下图片大小的处理方式

方式一：图片显示尺寸按比率缩放。此时，只需要提供一张图片资源。如 https://www.microsoft.com/zh-cn/。 但可能出现过份放大时图片显示模糊的情况。

方式二：不同分辨率范围加载不分辨率的图片。优点是可以保证图片显示清晰，缺点是需要提供各种分辨率的图片。

方式三：图片大小固定不变。优点是既可以保证图片显示清晰，又不用提供各种分辨率的图片。缺点是在页面缩放时其它元素都在缩放只图片不变可能造成缩放后的页面布局显示效果不是太完美。我们项目选择方式三。

5. 是否需要不同分辨率显示不同布局

自适应布局可以满足以上4点。但如果追求更完美的适配，需要不同分辨率范围下显示不同的页面布局，例如，1024~1920时导航在左侧，600~800时导航呈简化版且显示到页面上方，前端一般会用响应式布局实现。

作为一个非技术出身的产品, Get到的响应式布局的大概逻辑就是针对不同的布局写不同的CSS, 前端兼听可视区分辨率加载不同的CSS. 例如1024~1920是加载CSS1, 600~800时加载CSS2。

如果需要显示不同布局，那产品需要与UI设计师合作向研发输出不同布局的UI设计图。

以上就是关于在页面适配中产品需要定义的内容和相关的工作了。也许有很多不正确的理解，欢迎指出。

本文由 @小燕子 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议