响应式web设计与实现

《响应式web设计与实现》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、响应式Web设计与实现　　摘要：响应式Web设计能够适应不同屏幕尺寸设备访问Web页面的需要，使Web页面的布局和功能随用户的使用环境（包括屏幕尺寸、输入方式、设备特点和浏览器功能）而变化。文章阐述了响应式Web设计的感念及应用前景，分析了响应式Web设计应用领域及其应用上的优势，给出了响应式Web设计的关键技术。　　关键词：响应式Web；网页设计；HTML5；CSS　　1概述　　如今，手机、平板电脑等移动设备得到了广泛应用，而台式机27英寸甚至30英寸的显示器也很常见，这就使得上网设备屏幕之间的差距前所未有的巨大。因此，我们浏览原有专门为台式电脑准备的Web页面已经

2、不适合在小屏幕的移动设备和高分辨率大显示器上使用了。　　2010年，EthanMarcotte应用弹性网格布局、弹性图片和媒体查询这三种已有的技术，发明了“响应式Web设计”，解决了这个问题。　　2响应式Web设计的优势及需要避免的问题　　2.1适应不同屏幕　　根据不同设备的屏幕情况，响应式Web能够自动根据屏幕大小、分辨率对页面内容重新排版，使得网页内容更好地适应设备，展现出完美的显示效果。一般来说，页面设计者会优先使得重要内容首先显示出来，其他内容根据某些规则依次排列，用户可以通过滑动或滚动页面进行浏览。　　2.2横屏自动切换　　用移动设备访问网页，当屏幕由横屏切

3、换到竖屏（或者相反）时，响应式Web页面能够自动切换不同的网页布局，以适应页面的不同宽度，实现最佳的布局效果。　　2.3减少维护成本　　由于采用响应式Web设计开发的页面能够适应不同分辨率设备的显示，使得我们只需要对同一个页面进行开发和维护，同时更新数据时也不会出现多个独立平台数据不一致的情况，减少了开发和维护的成本。　　响应式Web使我们设计一个适应所有设备的页面成为现实，但是它是基于HTML5和CSS3的技术，同时它并不需要依赖服务器或后端方案。其能否有效，只取决与我们使用的浏览器是非支持。也就是说，我们的浏览器必须支持以上两种技术，才能完美地实现响应式页面。幸运

4、的是，如今移动设备的浏览器绝大部分都是支持HTML5和CSS3的，而桌面电脑的浏览器从IE9以上也是支持的。如果一定要保持网站的最大兼容性，只能做两套页面。通过javascript识别用户浏览器的版本，采用不同的处理方式。　　3响应式Web设计的关键技术　　响应式Web设计的关键技术包括有媒体查询、弹性布局和响应式图片。　　3.1媒体查询　　在设计响应式页面的时候，利用媒体查询得到设备的屏幕大小、屏幕宽高比和朝向（横向还是竖向），采用不同的CSS3代码改变内容的显示方式。　　媒体查询可以用到width（视口宽度）；height（视口高度）；device-width（设

5、备屏幕宽度）；device-height（设备屏幕高度）；orientation（设备方向是水平还是垂直）；aspect-ratio（视口的宽高比）等特性。设计响应式Web的时候，大多数情况下都是应用width（视口宽度）来确定目标设备屏幕的宽度，由此通过CSS样式来改变页面各个部分的显示布局。以下语句会在屏幕宽度小于等于360像素的情况下把所有的h1元素变成绿色：　　@mediascreenand（min-width：360px）{　　h1{color：green}　　}　　把上面的语句包含在网页的CSS样式表中就可以实现以上效果，也可以在html中嵌入媒体查询语句

6、，或者应用@import有条件地加载其他样式表。　　3.2弹性布局　　网页设计刚开始的时候，网站页面的宽度大多以百分比的形式表示，这样在窗口改变的时候，网页的宽度也随之变化，这就是弹性布局。大?s十年前，网站设计人员流行“像素级精度设计”和固定页面的宽度，以求在电脑浏览器上获得完全一致的显示效果。如今，为了适应手机等小屏幕设备的显示需要，我们要做响应式设计，就需要重新应用弹性布局创建网页。　　应用弹性布局，需要将固定像素大小转换成像素和视口的比例大小，应用EthanMarcotte给出的公式：　　百分比尺寸=目标元素尺寸÷上下文元素尺寸　　也就是用目标元素的尺寸占目标

7、所在容器的百分比。这个比例固定了之后，元素在其容器内的相对位置也就固定了。　　3.3响应式图片　　在CSS中声明：　　img{max-width：100%；}　　这样就可以实现图片随着流动布局容器的变化而缩放，使图片与其容器100%匹配。　　以上只是实现了弹性图片响应，但是它并不是响应式图片设计。我们应该为不同的屏幕尺寸提供不同分辨率的图片。　　那么问题来了？这样算完成了图片的响应吗？答案是否定的。弹性图片并不等于响应式图片。我们应该为不同的屏幕尺寸提供不同的图片：不再是一张图片满足不同的设备，而是为大屏幕准备大尺寸图片，小屏幕准备尺寸更小的清晰图片