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

基于响应式大学生竞赛服务网站设计 　　随着移动网络的普及，用户使用移动设备上网已经成为了一种趋势。为使得网站能够兼容更多类型的设备，保证用户有一个良好的体验，在网站设计时必须使用响应式Web技术 【关键词】响应式Web 媒体查询 弹性图片 viewport 近些年来移动智能设备发展迅猛，用户可以在个人电脑、平板电脑、智能手机等各种终端上访问一个网站。传统的Web设计技术已经适应时代的发展，无法保证在从屏幕像素大小不同的设备上访问网站时都能够得到一个良好的显示 我们在开发大学生竞赛服务网站时也遇到了类似的问题，经过认真的研究，最终利用响应式Web设计技术解决了这一问题。本文将通过探讨响应式的Web设计方式，研究如何构建一个网站，使之能够自动适应不同的网站访问设备，通过动态调整网页的布局结构和显示样式，把相同的内容以不同的格式呈现出来，做到“一源多屏” 1 响应式Web 2010年Ethan Marcotte提出了一种响应式网页设计理念[1]，它使得网页可以根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。简单的说，响应式Web页面，能够根据不同终端设备，响应用户的操作自动调整网页尺寸，达到页面美观的效果。响应式Web在设计时需要使用HTML5和CSS3，涉及到媒体查询（Media Queries）、响应式布局、弹性图片和viewport 属性四大关键技术 1.1 媒体查询 媒体查询是响应式Web设计的关键[2]。媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width、 height 和 color 等属性。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。在实际的开发中，网页设计者可以为不同大小的屏幕分别编写CSS样式文件，并在用户访问网站时通过@media screen判断和调用对应的样式文件 例如： @media screen and （min-width：1200px）{.post_box{width： 45%；float： left；} } @media screen and （min-width：960px）{.post_box{width： 30%；float： left；} } 规定了网页中的post_box在屏幕分辨率在大于1200px时的宽度为45%，当屏幕大小大于960px且小于1200px时的宽度为30% 1.2 响应式布局 响应式布局是进行响应式设计的基础。响应式Web 设计采用响应式布局来满足不同设备的需求，页面元素随着浏览器窗口的调整可以自动适配。响应式布局可以通过百分比布局、字号比例和浮动属性等技术手段完成 为避免用户在较小设备浏览网站时通过横向滚动条来查看页面，对于网页对象的宽度应该使用“%”为单位的相对尺寸，而不是使用固定像素（px）。上面的例子中，post_box的宽度被设计成百分比尺寸。当显示屏幕发生改变时，post_box宽度也会发生响应的变化 在响应式Web中不能使用像素（px）来设置文字的大小，而必须使用字号比例（em）。em可以根据当前基准字号的宽高成比例缩放文字，实现文字大小的响应式变化 为防止在小屏幕上Web页面各个div元素的??度由于挤压变得细长，需要将网页中div的位置设置为浮动（float）的。这样可以解决当屏幕宽度不够，一行放不下多个区块的问题 1.3 弹性图片 响应式Web设计的思路中，一个重要的因素是怎样处理图片方面的问题。网页中的图片通常会按照实际尺寸进行显示，但是在一些小屏幕的设备上，屏幕的实际宽度可能会小于图片宽度。为了避免使用鼠标拖动才能浏览的问题，需要使用弹性图片技术。弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。弹性图片技术最早由Richard Rutter提出，即使用CSS的max-width属性，例如： img { max-width： 100%；} 上述代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度，所以当窗口或容器的可视部分开始变窄时，图片的最大宽度值也会相应的减小，图片本身永远不会被容器边缘隐藏和覆盖 1.4 viewport属性 利用媒体查询能够很好的解决网页在分辨率大小不同的个人电脑浏览器上的浏览问题，但对于手机或平板浏览器等移动终端还是不够的。因为移动终端的浏览器默认页面是为宽屏幕设计的，它会把页面自动缩小以适应屏幕，造成的结果就是页面中的内容太小而影响用户的阅读。