基于响应式的大学生竞赛服务网站的设计

《基于响应式的大学生竞赛服务网站的设计》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、基于响应式的大学生竞赛服务网站的设计　　随着移动网络的普及，用户使用移动设备上网已经成为了一种趋势。为使得网站能够兼容更多类型的设备，保证用户有一个良好的体验，在网站设计时必须使用响应式Web技术。　　【关键词】响应式Web媒体查询弹性图片viewport　　近些年来移动智能设备发展迅猛，用户可以在个人电脑、平板电脑、智能手机等各种终端上访问一个网站。传统的Web设计技术已经适应时代的发展，无法保证在从屏幕像素大小不同的设备上访问网站时都能够得到一个良好的显示。　　我们在开发大学生竞赛服务网站时也遇到了类似的问题，经过

2、认真的研究，最终利用响应式Web设计技术解决了这一问题。本文将通过探讨响应式的Web设计方式，研究如何构建一个网站，使之能够自动适应不同的网站访问设备，通过动态调整网页的布局结构和显示样式，把相同的内容以不同的格式呈现出来，做到“一源多屏”。　　1响应式Web　　2010年EthanMarcotte提出了一种响应式网页设计理念[1]，它使得网页可以根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。简单的说，响应式Web页面，能够根据不同终端设备，响应用户的操作自动调整网页尺寸，达到页面美观

3、的效果。响应式Web在设计时需要使用HTML5和CSS3，涉及到媒体查询（MediaQueries）、响应式布局、弹性图片和viewport属性四大关键技术。　　1.1媒体查询　　媒体查询是响应式Web设计的关键[2]。媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color等属性。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备

4、定制显示效果。在实际的开发中，网页设计者可以为不同大小的屏幕分别编写CSS样式文件，并在用户访问网站时通过@mediascreen判断和调用对应的样式文件。　　例如：　　@mediascreenand（min-width：1200px）{.post_box{width：45%；float：left；}}　　@mediascreenand（min-width：960px）{.post_box{width：30%；float：left；}}　　规定了网页中的post_box在屏幕分辨率在大于1200px时的宽度为45%，当

5、屏幕大小大于960px且小于1200px时的宽度为30%。　　1.2响应式布局　　响应式布局是进行响应式设计的基础。响应式Web设计采用响应式布局来满足不同设备的需求，页面元素随着浏览器窗口的调整可以自动适配。响应式布局可以通过百分比布局、字号比例和浮动属性等技术手段完成。　　为避免用户在较小设备浏览网站时通过横向滚动条来查看页面，对于网页对象的宽度应该使用“%”为单位的相对尺寸，而不是使用固定像素（px）。上面的例子中，post_box的宽度被设计成百分比尺寸。当显示屏幕发生改变时，post_box宽度也会发生响应的

6、变化。　　在响应式Web中不能使用像素（px）来设置文字的大小，而必须使用字号比例（em）。em可以根据当前基准字号的宽高成比例缩放文字，实现文字大小的响应式变化。　　为防止在小屏幕上Web页面各个div元素的??度由于挤压变得细长，需要将网页中div的位置设置为浮动（float）的。这样可以解决当屏幕宽度不够，一行放不下多个区块的问题。　　1.3弹性图片　　响应式Web设计的思路中，一个重要的因素是怎样处理图片方面的问题。网页中的图片通常会按照实际尺寸进行显示，但是在一些小屏幕的设备上，屏幕的实际宽度可能会小于图片宽

7、度。为了避免使用鼠标拖动才能浏览的问题，需要使用弹性图片技术。弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。弹性图片技术最早由RichardRutter提出，即使用CSS的max-width属性，例如：　　img{max-width：100%；}　　上述代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度，所以当窗口或容器的可视部分开始变窄时，图片的最大宽度值也会相应的减小，图片本身永远不会被容器边缘隐藏和覆盖。　　1.4viewport属性　　利用媒体查询能够很好的

8、解决网页在分辨率大小不同的个人电脑浏览器上的浏览问题，但对于手机或平板浏览器等移动终端还是不够的。因为移动终端的浏览器默认页面是为宽屏幕设计的，它会把页面自动缩小以适应屏幕，造成的结果就是页面中的内容太小而影响用户的阅读。这个时候就必须使用viewport的meta标签来做一系列的设置，从而获取终端设备正确的宽度。　　Viewpo