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