The Science Education Article Collects
Total.480 December2019（C）
总第480期2019年12月（下）
摘要本文讨论了网站响应式设计的需求及关键实现技术，阐述了媒体查询、流式布局、弹性图片与弹性盒子等技术要点，分析了框架技术的优势及其关键的布局工具栅格系统，并给出了高校门户网站设计实践中的一些经验与认识。关键词响应式设计框架技术栅格系统Responsive Web Design and Its Application in College Portal Websites//Pan Hongyu,Liu Bofu
Abstract This paper discusses the requirements and key tech-
nologies of responsive web design,expounds the technologies such as media query,fluid layout,flexible picture and flexible box,analyzes the advantages of framework technology and its grid system,and gives some experience in the design practice of col-
lege portal websites.
Key words responsive design;framework;grid system
高校门户网站承担着学校信息发布宣传及与广大师生、考生等实现信息交互的任务，美观、实用、操作简便是基本要求。当前，大部分高校的门户网站是针对PC机设计的，适合在台式电脑和笔记本电脑上访问，随着智能手机与PAD 用户的增长，采用小尺寸屏幕设备访问门户网站的需求快速增长，但原有基于PC端的网站设计在小屏设备上展示时，既操作不便，也不够美观。随着技术的进步，适时对高校门户网站进行改版设计，让使用各类设备上网的用户都有好的访问体验，是一项势在必行的工作。
1响应式网站设计的基本方法
响应式网页设计（RWD，Responsive Web Design）这个术语，由伊桑·马科特（Ethan Marcotte）提出，得到业界认可，越来越多地用于网站设计实践，并随着相关框架技术的演进，简便性、实用性与开发效率都大幅提升。
当前响应式设计主要基于四种技术：媒体查询、流式布局、弹性图片、弹性盒子布局[1]。
（1）媒体查询是对用户上网设备的特性（主要是屏幕分辨率特性）进行查询识别，从而确定使用不同的CSS修饰样式。
媒体查询的定义使用@media开头，后面接相关的条件。
如：screen代表媒体类型为显示屏，条件中可设置min-width:576px类似的查询断点，断点是一些临界点，跨过这些临界点网页的布局就会发生变化。在媒体查询中，断点的设置需要精心考虑。断点设置得越精细，展示的效果就越精确。
（2）流式布局即百分比布局。页面中起布局作用的元素的宽度用百分数表示，使布局元素的尺寸能根据浏览器窗口的大小进行自适应调整。
（3）弹性图片。网页中总会用到图片。在进行页面缩放时，图片尺寸也要作相应调整。合理设置图像的大小，采用恰当的表示方法，能够达到良好适应各种尺寸屏幕的效果。
弹性图片的设置，通常将图片的width属性用百分比表示，如width:100%让图片充满父元素，跟随父元素的宽度发生变化；还可给图片加上max-width:100%属性，防止图片过大而超出容器的宽度。
（4）弹性盒子（flexible box）布局。W3C万维网标准化组织提出了一种新的Flex布局方案，可以简便、完整、响应式地实现各种页面布局。
弹性盒子布局能够根据浏览器窗口大小的改变自行扩展或收缩内部元素，智能调整元素之间的间隔，设置非常简便，具有强大的灵活性。大部分标签都能作为flex容器，它的所有子元素自动成为flex项目。flex容器存在两根轴，水平方向的为主轴，垂直方向的为交叉轴。flex项目默认沿主轴方向排列。给标签加上属性display:flex，该标签就成为flex容器。利用Flex相关属性设置可对子项目进行快捷排版。
2框架技术的应用
人们对网页界面的美观程度、使用的便捷程度等的期望越来越高，对网页开发与更新的速度也提出了更高的要
高校门户网站响应式设计方法与实践
潘红玉刘博夫
（湖南师范大学教育科学学院湖南·长沙410081）中图分类号：G652文献标识码：A DOI：10.16871/jki.kjwhc.2019.12.049
作者简介：潘红玉（1969—），女，硕士，讲师，主要研究方向为教育技术及应用。web布局框架
120
教改教法
求，这些都促进了各种前端框架的诞生。目前，在网页的布局与修饰方面，知名度较高的是Bootstrap框
架，为开源产品。使用框架技术可以快速设计出响应式的网页，比直接使用CSS样式更规范，也更利于团队开发。
Bootstrap框架现在发展到了4.0版本，它有如下特点：使用@media媒体查询适应不同大小屏幕；移动设备优先；支持自定义属性样式；采用高效的栅格布局；基于flex 弹性盒子设计。
Bootstrap栅格系统可以采用基于媒体查询的多个固定宽度布局，以.container容器类开始。也可使用流式布局，宽度设置为100%，以.container-fluid容器类开始。
data属性是HTML5中定义的一个全局属性。可以为各种HTML元素嵌入自定义的data属性，自定义的数据可以被CSS或者JS使用，以实现额外的功能。
Bootstrap设计了高效的栅格系统。栅格将一个页面分解成多个区块，根据不同的屏幕尺寸，调整这些区块的排版，从而实现响应式设计[2]。
Bootstrap栅格系统每个容器包含若干行，每行包含若干列，默认总列数为12列。栅格的列对应的类名形如“. col-类型-列数”。列数代表该元素的宽度占据多少列。类型只有特定的几个值可供选择，分别是sm小屏、md中屏、lg 大屏、xl超大屏，它们就是断点类型。Bootstrap4采用移动优先策略，缺省认为是xs超小屏。
断点含义是当视区viewport宽度大于或等于断点值时，将按指定的样式显示。按照sm、md、lg、xl的顺序，断点像素值依次增大。就是说从小尺寸往大尺寸去分析，布局不需要改变时就不设置，在某个断点处要改变样式时，就加上相应的媒体查询与设置。
Bootstrap栅格系统支持嵌套，在一个列容器中可以再添加行容器，该行中又可按12列进行内容布局。
3高校门户网站响应式设计实践
综上所述，网站前端技术的快速发展，为高校门户网站的响应式设计提供了技术基础。综合运用CSS3提供的媒体查询、流式布局、弹性图片与弹性盒子布局技术，可以制作出精确适应各种屏幕尺寸的网页与网站。但对每一个网站都一个个样式项地去编写与匹配，效率低，也不够规范，维护人员要读懂个性化彩浓厚的网站样式设置费时费力，造成维护成本很高。所以采用业界认同度高的框架进行网站设计，是可行和明智的选择。Bootstrap框架提供了优秀的栅格系统，让页面布局变得轻松而规范，也不影响网页的个性化展示。
通过我们的项目实践，在运用以上技术进行高校门户网站设计时，还有以下心得与认识：
（1）从知名高校的门户网站更新迭代情况分析，采用响应式设计的比例不断提高，响应式会成为主流的设计方法与要求。
（2）成熟框架技术的应用逐渐成为主流设计方法，个性化要求高的项目可在成熟框架的基础上进行定制开发，Bootstrap框架开放了全部源码，可修改源码后重新编译使用。
（3）Bootstrap框架应用的经典案例中，有明显的更多采用大图标、采用大块图文进行页面展示与布局的趋势，各版块间很少用复杂的框线或小图形进行装饰，仅仅靠空白或底底图的变化进行空间的分隔。这能够给人以更强的视觉冲击效果，阅读也更轻松，还降低了设计的复杂度。受此影响，高校门户网站也会从原来普遍使用的过于强调框线与细节的装饰形式，过渡到更大气、图文并茂的大版块布局方式。
（4）栅格系统中一行分为12列，当该行内容项不为12的因子时，可直接使用百分比设置各项的宽度。也可使用列中嵌套行容器再分栏的方法实现。
（5）Bootstrap4框架缺省使用了超小、小、中、大、超大五区段四断点的设计，基本能满足从手机到PC的浏览需求。但页面内容的呈现不能以此为限，还是要以内容本身达到最佳呈现效果为原则。必要时可为某个内容版块添加更多的断点，通过媒体查询达到更精细的显示效果控制。
（6）响应式设计中更多地使用相对单位来代替绝对单位，以使网页在手机上进行缩放操作时达到更好的效果。相对单位中，百分比是相对父元素的比例，em是相对父元素的，而rem是相对html根元素的，vw是相对于视区宽度的比例，vh是相对于视区高度的比例。
（7）随着智能手机显示屏分辨率的提高，设备像素比也在提高，即一个CSS像素可能由几倍的设备物理像素完成显示。网页中素材图片的制作不能只考虑CSS像素，还要考虑设备像素比。依据物理像素选择对应分辨率的图片才能达到好的效果。HTML5中img标签的srcset属性设置可实现此功能。
参考文献
[1]郑婷婷，黄杰晟.响应式网页开发基础教程[M].北京：人民邮电
出版社,2019.
[2]车云月.Bootstrap响应式网站开发实战[M].北京：清华大学
出版社,2018.
编辑李金枝
121

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。