响应式Web设计与实现

2017-04-27赵晴

科技创新与应用 2017年11期

赵晴

摘要：响应式Web设计能够适应不同屏幕尺寸设备访问Web页面的需要，使Web页面的布局和功能随用户的使用环境（包括屏幕尺寸、输入方式、设备特点和浏览器功能）而变化。文章阐述了响应式Web设计的感念及应用前景，分析了响应式Web设计应用领域及其应用上的优势，给出了响应式Web设计的关键技术。

关键词：响应式Web；网页设计；HTML5；CSS

1 概述

如今，手机、平板电脑等移动设备得到了广泛应用，而台式机27英寸甚至30英寸的显示器也很常见，这就使得上网设备屏幕之间的差距前所未有的巨大。因此，我们浏览原有专门为台式电脑准备的Web页面已经不适合在小屏幕的移动设备和高分辨率大显示器上使用了。

2010年，Ethan Marcotte应用弹性网格布局、弹性图片和媒体查询这三种已有的技术，发明了“响应式Web设计”，解决了这个问题。

2 响应式Web设计的优势及需要避免的问题

2.1 适应不同屏幕

根据不同设备的屏幕情况，响应式Web能够自动根据屏幕大小、分辨率对页面内容重新排版，使得网页内容更好地适应设备，展现出完美的显示效果。一般来说，页面设计者会优先使得重要内容首先显示出来，其他内容根据某些规则依次排列，用户可以通过滑动或滚动页面进行浏览。

2.2 横屏自动切换

用移动设备访问网页，当屏幕由横屏切换到竖屏（或者相反）时，响应式Web页面能够自动切换不同的网页布局，以适应页面的不同宽度，实现最佳的布局效果。

2.3 减少维护成本

由于采用响应式Web设计开发的页面能够适应不同分辨率设备的显示，使得我们只需要对同一个页面进行开发和维护，同时更新数据时也不会出现多个独立平台数据不一致的情况，减少了开发和维护的成本。

响应式Web使我们设计一个适应所有设备的页面成为现实，但是它是基于HTML5和CSS3的技术，同时它并不需要依赖服务器或后端方案。其能否有效，只取决与我们使用的浏览器是非支持。也就是说，我们的浏览器必须支持以上两种技术，才能完美地实现响应式页面。幸运的是，如今移动设备的浏览器绝大部分都是支持HTML5和CSS3的，而桌面电脑的浏览器从IE9以上也是支持的。如果一定要保持网站的最大兼容性，只能做两套页面。通过javascript识别用户浏览器的版本，采用不同的处理方式。

3 响应式Web设计的关键技术

响应式Web设计的关键技术包括有媒体查询、弹性布局和响应式图片。

3.1 媒体查询

在设计响应式页面的时候，利用媒体查询得到设备的屏幕大小、屏幕宽高比和朝向（横向还是竖向），采用不同的CSS3代码改变内容的显示方式。

媒体查询可以用到width（视口宽度）；height（视口高度）；device-width（设备屏幕宽度）；device-height（设备屏幕高度）；orientation（设备方向是水平还是垂直）；aspect-ratio（视口的宽高比）等特性。设计响应式Web的时候，大多数情况下都是应用width（视口宽度）来确定目标设备屏幕的宽度，由此通过CSS样式来改变页面各个部分的显示布局。以下语句会在屏幕宽度小于等于360像素的情况下把所有的h1元素变成绿色：

@media screen and （min-width：360px）{

h1 { color： green }

}

把上面的语句包含在网页的CSS样式表中就可以实现以上效果，也可以在html中嵌入媒体查询语句，或者应用@import有条件地加载其他样式表。

3.2 弹性布局

网页设计刚开始的时候，网站页面的宽度大多以百分比的形式表示，这样在窗口改变的时候，网页的宽度也随之变化，这就是弹性布局。大約十年前，网站设计人员流行“像素级精度设计”和固定页面的宽度，以求在电脑浏览器上获得完全一致的显示效果。如今，为了适应手机等小屏幕设备的显示需要，我们要做响应式设计，就需要重新应用弹性布局创建网页。

应用弹性布局，需要将固定像素大小转换成像素和视口的比例大小，应用Ethan Marcotte给出的公式：

百分比尺寸=目标元素尺寸÷上下文元素尺寸

也就是用目标元素的尺寸占目标所在容器的百分比。这个比例固定了之后，元素在其容器内的相对位置也就固定了。

3.3 响应式图片

在CSS中声明：

img { max-width： 100%； }

这样就可以实现图片随着流动布局容器的变化而缩放，使图片与其容器100%匹配。

以上只是实现了弹性图片响应，但是它并不是响应式图片设计。我们应该为不同的屏幕尺寸提供不同分辨率的图片。

那么问题来了？这样算完成了图片的响应吗？答案是否定的。弹性图片并不等于响应式图片。我们应该为不同的屏幕尺寸提供不同的图片：不再是一张图片满足不同的设备，而是为大屏幕准备大尺寸图片，小屏幕准备尺寸更小的清晰图片。

我们应用Embedded Content规范来进行图片分辨率的切换工作，具体来说，就是让拥有高分辨率设备的用户能够看到高分辨率的清晰图片，低分辨率设备用户看到低分辨率的符合他们设备大小的图片，即能够根据视口的大小显示完全不同的图片，实现类似媒体查询的功能。

4 结束语

Ethan Marcotte提出的响应式设计代表了移动终端Web开发的发展趋势，它是各种不同设备访问互联网的一种统一解决方案。通过适应各个不同设备屏幕的大小，为现在乃至以后的设备都提供了最佳的访问体验。