响应式网页设计在网站建设的应用

时间：2022-09-24 10:23:10

导语：响应式网页设计在网站建设的应用一文来源于网友上传，不代表本站观点，若需要原创文章可咨询客服老师，欢迎参考。

响应式网页设计在网站建设的应用

本文以高校网站建设作为研究课题，分析了在当今移动互联网时代，高校网站在用户体验方面的现状以及存在的问题，引出了响应式网页设计的概念，并介绍了使用响应式网页设计来建设高校网站的优势和方法，旨在推动响应式网页设计在高校网站建设中的应用。

1引言

当今网站已经成为各行各业，乃至很多人的标配名片，当想了解某些未知信息时，第一时间想到的就是去网上搜索了解信息。然而随着时代的发展，我们的使用场景发生了变化，以前我们上网用的是台式电脑（PC），而现在我们使用最多的是移动设备。据著名网站通信流量监测机构StatCounter于2019年6月统计数据显示，我国网民使用手机端的市场份额为58.03%，PC端的市场份额为40.26%，平板电脑的市场份额为1.71%。可见在我国有一半以上的网民使用手机来上网浏览信息。传统的网站在建设时没有考虑到移动设备的显示和兼容问题，导致在移动设备上的用户体验不友好。因此，设计一个能够同时适配PC和移动设备，并且具有良好用户体验的网站是每个网站主都要考虑的问题。

2响应式网页设计

在响应式网页设计的概念提出之前，网站前端开发者们为了使网站能够适配各种终端设备（PC、手机和平板电脑等），往往会专门针对不同的终端设备开发出相适配的版本，即一个网站针对不同的终端设备开发出不同的前端版本，从而达到相同的用户体验，但是，如果有几十种甚至上百种不同型号的终端设备，难道都要为其单独开发吗？显然这样的做法并不科学，大大增加了网站的开发成本以及日后的修改成本。于是在2010年5月，一位名为伊桑•马科特的网页设计师首次提出了响应式网页设计（ResponsiveWebDesign）的概念，即为网站开发一个版本的样式，便能自动兼容并适配各种终端设备，且能同时达到相同的用户体验。可以说响应式网页设计的出现，不仅降低了网站的开发成本，还解决了终端设备的兼容问题，同时各大搜索引擎也更喜欢响应式网页设计的网站，响应式网页已成为网站前端设计的首选。

3高校网站使用响应式网页设计的现状

虽然响应式网页设计的概念早就提出了，但是在我国直到2015年才开始逐渐流行起来（可能与PC和移动设备的市场份额有关），而高校网站使用的响应式网页设计技术相对比较落后，笔者对全国10个省份，每个省随机抽取了10所高校门户网站以及招生网站统计发现，其中门户网站使用响应式网页设计的高校有43%，招生网站使用响应式网页设计的高校只有10%。从数据和笔者工作的经验来看，高校网站使用响应式网页设计相对落后的原因一是管理者不够重视，没有意识到网站还需要适配移动设备，二是缺少专门进行学校网站开发的专职人员，因此对于新技术的应用还需要一定的时间过程。不过近几年来，越来越多的高校门户网站已经逐渐开始使用响应式网页设计了。

4响应式网页设计的方法

4.1响应式网页设计的技术原理。一个标准的网页一般由结构（HTML，XML，XHTML）、表现（CSS）和行为（DOM、ECMAScript）三部分组成，其中结构和表现部分则为响应式网页设计的重要部分，另外CSS3标准的建立也为响应式网页设计奠定了基础。响应式网页设计的核心技术一般由以下三部分组成：（1）媒体查询（MediaQueries）媒体查询又称为媒介查询，即通过CSS3的@media声明来查询展示媒介（终端设备）的显示尺寸，根据不同尺寸的终端设备来选择不同的CSS样式，从而达到网页能自动适配多种终端的效果。@media声明从CSS3开始才被支持，现在的移动设备中的浏览器均支持CSS3，只有PC端的一些老旧浏览器不支持，如IE8以前的版本，很多网站已经放弃这些老旧的浏览器。媒体查询示例代码如下：@mediascreenand（min-width:768px）{这里设置您的CSS样式代码}（2）网格布局（FlexibleGrids）这里的网格布局是一个宽泛的概念，即结合了流式布局、弹性布局和栅格布局的特性，把整个网页划分成一个个网格，网页上每个网格可以任意组合，最终表现为一个个内容块。通过与媒体查询配合，同时运用流式布局中以百分比或混合百分比作为度量单位的方式和弹性布局中Flex技术，从而实现网页响应式布局的效果。（3）弹性图片（FlexibleImages）响应式网页设计中，处理好图片也非常重要。因为现在的网站往往会使用大幅图片来展示内容，这就需要根据终端设备的宽度来自动调整图片的宽度，从而达到更好的显示效果。通常的做法是将图片宽度以百分比来度量，配合max-width或background-size等CSS属性来完成。4.2目前主流响应式网页设计开发框架介绍。我们在做网站前端开发的时候，可以借助一些前端开发框架来帮助快速开发网站，这些前端开发框架的原理其实就是将布局系统、排版样式、导航样式、表单样式、按钮样式和表格样式等封装好，我们只需要直接拿来引用，而不需要单独的为每个HTML标签写CSS样式，还能提高界面的美观性。目前支持响应式网页设计的开发框架有很多，甚至自己也可以开发一套适合的开发框架，下面介绍几种主流的响应式网页设计开发框架。（1）Bootstrap由Twitter的工程师开发，是一款集合HTML、CSS和JavaScript的框架，用于开发响应式布局、移动设备优先的网站，且免费开源，拥有庞大的社区支持。（2）Foundation由一家专业的产品设计公司ZURB开发，是目前在商业领域使用最为广泛的一款响应式前端开发框架，是一个易用、强大而灵活的框架，且免费开源。（3）GroundworkCSS2同样是一款响应式HTML、CSS和Javascript的框架，其官网还提供大量的在线展示示例和开发文档，且免费开源。4.3使用响应式前端开发框架来开发高校网站。面对如此繁多的前端开发框架，高校网站只需要挑选其中一款即可满足需求。通常高校网站前端开发步骤如下（这里仅仅提供一种思路，具体设计开发的细节不展开）：第一步设计界面，用网格布局的原理，将高校网站的内容设计成一个个区块，比如从页面顶端依次到页面的底端，一般为网站Logo、导航菜单、大图轮播、主要栏目列表、底部联系方式、备案信息和新媒体二维码等。第二步选择一款主流的前端开发框架，通过前端开发框架的实例，找到适合的界面设计实例，直接拿来使用就可以。第三步开发调试您的网站，使用Chrome开发者工具可以高效调试您的网站。这里要注意的一点是，为了确保移动终端的适当缩放，需要在HTML代码的<head>之中添加viewport元数据标签，并设置成<metaname="viewport"content="width=device-width,initial-scale=1">。

5结束语

随着移动互联网的兴起，网站前端开发技术也得到了一次又一次的革新，其中响应式网页设计解决了当下的用户痛点，但是也不能盲目地追新技术，我们使用响应式网页设计的目的是为了让用户有更好地体验，满足用户的需求。最后笔者建议高校作为教育机构，在大多数高校均开设了相应的网站前端开发课程前提下，对于高校自身的网站建设方面，理应优先提供更好的网站用户体验，起到示范和教育作用。

作者:薛鹏飞 单位:薛鹏飞常州纺织服装职业技术学院