移动设备正在爆炸性地增长，成为我们日常访问互联网的终端。于是网页设计师不得不面对一个难题：如何才能在大小相同的设备上呈现同样的网页内容？
为了解决这个问题，很多网站的解决办法是，为不同的设备提供不同的网页，比如专门提供一个手机版本，这种做法需要同时维护好几个版本，增加了维护和设计的工作量。
responsive设计，也就是响应设计，指可以自动识别屏幕宽度，并做出相应调整的网页设计。这种方式是用来解决如何在不同设备上显示不同布局问题的关键。
响应式设计的核心思想是“自适应”，这要求网页开发的时候，文字、图片等都不使用固定大小（而使用相对大小）。另外，各个区块的位置也应该是浮动的，当区块大小超过了屏幕宽度的时候，这个区块会自动滚到前面元素的下方，类似文本编辑器的自动折行功能。我们可以稍微简单粗暴点儿地理解响应式设计的实现：首先是自动探测屏幕大小，然后根据设定的屏幕大小阈值在不同尺寸的屏幕下显示不同的样式。这样就可以达到通过手机、平板、电脑等不同设备访问同一网站时，看到不同的呈现方式。
响应式设计对测试带来的挑战也是巨大的。由于页面元素布局的动态化，对测试人员来说需要着重关心的测试点也增加起来，包括：在不同设备（分辨率）下的页面元素布局流动是否合理，弹出框等页面交互元素是否有被遮盖或者显示不全等。
网友评论