摘 要： 手机等移动设备已成为网页的重要应用终端，针对常规网页设计课程中固化网页大小的教学局限，借助HTML5和CSS3新技术，提出基于终端自适应的网页设计教学拓展。通过对流式、响应式及弹性盒子等多种终端自适应方法的剖析及优缺点的探讨，突出自适应网页的实际应用意义和CSS3 Flexbox弹性布局的灵活性，增强网页课程的教学深度，提升学习质量和学习意义。
关键词： 网页设计； 终端； 自适应； 弹性盒子； CSS3
中图分类号：TP393.092 文献标志码：A 文章编号：1006-8228（2018）03-70-03
Teaching extension for design of terminal-adaptive webpage
Jiang Yuzhen， Zhu Yinghui， Chen Jianxiao， Lu Xicong， Yu Xiaochun
（School of Computer Information Engineering， Hanshan Normal University， Chaozhou， Guangdong 521041， China）
Abstract： Mobile phone and other mobile devices have become the important application terminals of web pages. Aiming at the teaching limitations of fixed-size web pages in regular webpage design courses， with the help of HTML5 and CSS3 technology， a teaching extension for design of terminal adaptive webpage is put forward. Through the analysis of a variety of terminal adaptive methods， such as FlowLayout， responsive design and Flexbox， the practical importance of adaptive webpage and the flexibility advantage of CSS3 Flexbox are emphasized， thus improving the teaching depth， the learning quality and the significance of webpage courses.
Key words： webpage design； terminal； self-adaptive； Flexbox； CSS3
0 引言
作为上网的主要依托方式，网站网页一直在网络应用中起着举足轻重的媒介作用，《网页设计与制作》课程也常作为专业信息技术课或计算机公共基础课在高校中推广教学[1]。随着各种智能移动设备、掌上电脑等电子产品的迅猛推出，同一个网站的网页的受访终端可能是手机、平板和PC机等，这些设备的屏幕分辨率大相径庭。如何保证网页在各种终端上均能获得友好、美观的显示效果以及稳定、通用的操作功能将是一个网站得以长远立足的根本条件。对此，新标准HTML5应运而生，HTML5的目标就是使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容[2]。
虽然目前很多网页设计课程已转向基于HTML5教学，但在制作方法推介上却还沿袭传统的面向PC机固定的大屏设计模式，并没有突出HTML5设计上的可移植性和灵活性。本文主要探讨终端多样化环境下各种网页自适应布局的实现方法，重点介绍HTML5+CSS3的弹性网页布局方法，拓展实用知识点，填补常规网页设计教学中多样化应用的不足。
1 HTML5网页的缩放设计
使用手机等小屏幕设备浏览网站网页时，许多传统网页常会自动缩小至屏幕范围内。虽然这种显示可以快速地抓住整个网页的概构，但却可能因为字体太小而难以辨识网页的细节内容。为提高移动设备显示性能，HTML5提倡使用viewport元标签，当网页加载时，手机浏览器就会先把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”比屏幕宽，网页不会被挤到很小的窗口中，用户可以通过平移和缩放来浏览网页的不同部分。以下代码实现按原始大小显示网页，不自动缩小，允许手动缩放，缩放范围为初始大小的0.5～2.0倍。
2 流式网页布局
流式布局是通过改变元素的排列达到适应设计尺寸的目的。流式布局的网页可以这样理解：页面上内容模块就像液体一样，从左到右从上到下地流动且自适应地排列。流式布局常使用百分比分配技术和浮动技术。百分比布局模式能实现网页内容模块的自动横向伸缩；浮动布局模式则能依据浏览器或容器盒子宽度让各内容模块自动排列成多行[3]。
2.1 百分比布局
百分比布局使用百分比来设置各个部分的具体宽度以用来适应不同的分辨率。在百分比布局模式下，各热菽？榈目矶然岣据浏览器宽度进行自动等比缩放，其自适应显示方式如图1所示。该网页设计模式的优点是技术上容易为用户接受也容易实现，但主要缺点是，当需要添加新内容模块时，所有之前的内容模块可能都要重设百分比，更新的工作量大。
图1 百分比布局的网页自适应模式
2.2 浮动布局
浮动布局利用对象的float属性实现内容模块（浮动框）的自动排列。常设float属性值为”left”，浮动框自动向左移动靠拢，直到它的左边缘碰到包含框或另一个浮动框的边框为止，若包含框宽度变小，则后面的浮动框会自动被“挤”到下一行。其自适应显示方式如图2所示。该网页设计模式的优点是可以随时添加新的内容模块而不用修改之前模块的属性，缺点是其浮动方向只有水平向左浮动或向右浮动，且当各内容盒子的高度不协调时，容易造成较大的版面空白区。
图2 浮动布局的网页自适应模式
3 响应式网页布局
响应式网页设计是指可以自动识别屏幕宽度、并作出相应调整的网页设计[4]。其关键技术是通过CSS3引入Media Query模块自动探测屏幕宽度，然后加载相应的CSS文件或执行相应的CSS样式代码。响应式网页布局常使用“CSS的@media规则”和“link标签媒体查询”两种方式实现自适应显示。
3.1 @media规则
@media规则添加在网页的标签中，根据不
同的屏幕分辨率而应用不同的CSS规则。以下代码实现列表链接字体在三种不同浏览器宽度下的大小变化。当浏览器窗口宽度“800px”时，字体放大1.6倍，图像宽度800px。网页效果如图3。
@media screen and （min- width：801px） { ul li a
{font-size：1.6em；} img{width：800px}}
@media screen and （min-width：601px） and （max-width：
800px） {ul li a{font-size：1.3em；} img{width：600px}}
@media screen and （max-width：600px）{ul li a{font-size：
1em；} img{width：400px}}
图3 @media规则的自适应效果
3.2 link标签媒体查询
link标签媒体查询通过标签实现判断屏幕大小并加载相应的CSS文件，以实现更多的网页外观样式的自适应优化。代码如下：
4 CSS3 Flexbox弹性布局
Flexbox弹性布局是由CSS3支持的一个新的布局模式，旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的[5]。
Flexbox布局由伸缩容器和伸缩项目（内容模块）组成。通过设置元素的display属性为flex或inline-flex而得到一个伸缩容器。以下CSS3代码显示不换行伸缩容器的弹性排版效果：
.flex-container {
display：flex； //指定容器为flex弹性布局
flex-direction：row； //容器内项目排列方向为横向自左向右
background-color：#FDAFB0；
list-style-type：none；
padding：10px； }
.flex-item {
height：100px；
width：100px；
//项目盒子的高宽虽然设定为100px，仍能受其容器盒子
控制而弹性缩放
background-color： #FBFFC1；
margin：2px；
text-align：center；
font-size：16px；
line-height：80px； }
当改变浏览器宽度或更换小分辨率显示器时，网页的自适应效果如图4所示。
图4 “不换行”Flexbox弹性布局的自适应效果
Flexbox弹性布局中的内容模块不仅能横向排列，还能够纵向排列。若在CSS类选择器“.flex-container”中添加：“flex-wrap：wrap；”，即将窗口内项目的换行方式设为可换行，则项目小盒子改为自适应换行排列。当用手机浏览该网页，手机竖放和横放浏览时，网页自适应效果如图5。
图5 “换行”Flexbox弹性布局的手机竖放/横放自适应效果
5 结束语
HTML5与CSS3技术结合，可使网页既具有新颖大气的界面效果，也具备安全、稳健、高效的平台通用功能。在网页设计与制作教学中，自适应网页设计灵活性高，实际应用性强，本文探讨了手机等浏览设备多样化环境下HTML5网页通用性设计方法。其中，流式布局和响应式布局较为传统且易学易实现，而Flexbox布局则能更好地操作和控制内部的子元素，具有更灵活更多效果的设计性。相比之下，Flexbox布局的优势非常明显：不必太关心容器盒子是否有足够的空间，每个子项目可以自动分配到容器的宽高比例；当窗口或容器大小改变时，不用担心子项目会破坏布局；可以方便地让子项目在容器中进行的左右或上下对齐，设置他们排成行或排成列；无需修改结构就可以改变他们的显示顺序。终端自适应网页设计是网页基础学习的知识拓展，是具备实用意义的前端设计技术，教学上，需要循序渐进，由易入难地理解、掌握各种自适应方法，才能真正实现学有所成、学以致用。
参考文献（References）：
[1] 陈建孝，江玉珍，陆锡聪，余晓春.网页制作案例教程[M].人民
邮电出版社，2017.
[2] 周美玲，陈书理.CSS3和HTML5的优势及其在网页布局中的
应用[J].开封大学学报，2017.31（2）：86-88
[3] 郑伟.自适应网页制作的技术研究[J].科技风，2016.21：63，83
[4] 王燕妮.响应式布局探析[J].电脑编程技巧与维护，2015.10：
52-53
[5] 岳丹丹.网页浮动布局方式和伸缩盒布局方式的比较研究[J].
兴义民族师范学院学报，2016.6：116-119
