基于HTML5与CSS3的网页设计技术研究
摘要：针对计算机屏幕设计的网站在其他尺寸的设备上的显示效果大打折扣的问题，提出了一种基于HTML5和CSS3的响应式网页设计，它可以跟据用户使用设备的屏幕分辨率、尺寸、情境和行为等调整页面布局，使不同设备上的页面显示效果更加合理、流畅，给用户带来优质的体验。实验表明，响应式网页设计能够自适应不同设备，提供更好的显示效果。
关键词：响应式网页;网页设计;页面优化
赵怡姗; 范明钰成都信息工程大学学报2021-12-13
0引言
随着移动互联逐渐成熟，人们享受着它带来的随时、随地、随身和互联网开放、分享、互动的便利。由于需要兼容不同移动终端，若只采取传统pc网页设计，将会存在以下问题：
第一，网页界面不能完整且清晰地呈现在移动设备上，用户需要不停缩小、放大页面来进行操作，用户体验不佳。
第二，网页界面显示混乱，会出现文字、图片堆叠的情况，导致浏览网页困难。
第三，用户操作多样化，触摸式响应、横竖屏切换、缩放网页中字体的大小等将导致传统网页不能正常呈现。
目前解决方法是为每一款不同的设备单独编写代码，但这将导致程序开发成本大大增加。
针对以上问题，提出的解决方法是采用响应式Web设计，其核心思想是基于HTML5、CSS3等技术，使设计出的网页具有跨平台性和自适应性，能够在不同的Web浏览器或不同参数的显示器上自动调整自身布局，使得网站界面能够在移动手机端、iPad平板电脑和桌面电脑各类设备上呈现出一致的效果[1]。采用响应式布局，对于投资者而言，降低了资金投人与维护成本;对于开发者而言，减少了烦琐的重复开发次数;对于用户而言，在各个Web客户端均可以看到布局一致的内容界面，增强了用户体验感[2]。
在移动行业的快速发展，移动设备大量涌人市场的背景下，研究基于HTML5和CSS3的响应式Web的设计与实现具有很大的研究意义和应用价值。
为了解决传统PC网页设计无法兼容不同移动终端的问题，可以针对不同移动端(如I0S、安卓、黑莓等)分别开发客户端，但这需要单独探测每一台移动终端的屏幕尺寸、分辨率，会造成过多的人力和物力的浪费，没有从根本上解决问题。美国的用户体验设计师EthanMarcotte提出基于响应式的Web设计理论，是设计一套系统界面，满足不同终端设备(包括PC机、平板电脑及智能手机等)对数据展示操作需求，而显示不发生异样[3]。这种设计理念，较好地解决了传统网页开发模式只能在单一类设备或固定某几类浏览器上的使用局限性，从根本上使网页具有跨平台、自适应等特性。从而使网站管理者可以以较低的成本开发、维护和升级网站;开发者可以以一套编码设计实现网站内容，降低了开发人力，也减少了后期运维成本;用户在不同客户端设备无差别地浏览网页，增强了用户体验感，使用户能够方便快捷地进行办公等行为。
响应式设计采用的技术手段主要有3种，分别为流动布局、媒体查询技术和弹性图片[4]。其基本原理为：一切弹性化，即将网页上出现的图片、文本的固定尺寸与像素转变为按照设备尺寸进行计算后的百分比数据，使图片和文本的相对大小可以自由变动，增强网页自动调整的弹性。在程序设计者开发时，可以选取已包装好的框架，快速实现网页的弹性化，以提高开发效率。GitHub网站上提供的免费框架有Bootstrap、Foundation、Skeleton、LessFramework、Frameless、Wireiy等，这些框架可以帮助程序员减少代码工作量、摒去冗余的代码。这些框架的广泛应用，大大推动了响应式Web的开发和应用。
1响应式网页核心技术1.1响应式网页
响应式网页是指能够兼容不同终端，自行识别设备屏幕尺寸并做相应调整的网页设计。若只使用传统PC网页，当被接人移动端设备时往往不宜阅读，用户需要滑动、缩放页面进行查看，同时由于页面被缩放，许多网页上的按钮将不能正常使用，导致用户体验感极差。而响应式网页可以自动进行页面调整以达到更好的用户体验。现在响应式网页设计技术正在逐渐成熟，许多网站都采用响应式网页以达到吸引用户的目的。对于如今智能产品飞速发展的时代来说，响应式网页符合其发展方向。甚至在未来，会有更多的智能设备出现，如何提高网站自适应性是很好的课题。现在的技术人员通过使用HTML5和CSS3来实现响应式Web技术，包括：弹性(流动)布局、弹性图片和媒体查询技术，通过此方式设计的网页界面具有弹性，能够调整网页布局、图片尺寸和分辨率以适应不同尺寸的显示屏幕。其中，HTML5是超文本标记语言的第五次重大修改。与以前的版本相比，CSS3在图像背景、布局样式、视觉元素等方面具有显著的特点m。
1.2响应式关键技术
主要的关键技术如下：
(1)媒体查询。由媒体类型和一个或多个检测媒体特性的条件表达式组成，可用于检测的媒体特性有width、height和coloi■等。媒体查询可以针对不同大小的设备终端，自动检测系统尺寸、屏幕大小、屏幕定向等，选择不同的CSS样式。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
(2)弹性(流动)布局。该方式使各层块的位置具有浮动特性[5]，设计人员将网页宽度、图片、文字等元素的大小用百分比表示，而不是用固定的数字。这样可以在显示页面大小变化时，随之做出改变以适应不同的网页布局。
(3)弹性图片。默认情况下，图像的显示尺寸是以width和height属性值来定义。属性值一旦固定，无论网页界面如何变化，图像只会按原始尺寸显示。若设置为弹性图片，只需将图像的max-width属性设置为百分数，就可以让图像随着弹性网格自动缩放。如果图片的宽度超过显示器的宽度，就自动缩小，而不会撑破显示器;反之就按原始尺寸显示[6]。
利用媒体查询技术可以得知不同硬件设备显示器的尺寸大小，使整个网页布局具有自适应性，可以动态地调整比例变化。网页可以应用在不同的硬件显示器上，完美地呈现给不同设备的用户，使用户体验感强烈[7]。但是单一地通过此技术，并不能完全展示理想化的效果。如果当窗口的大小在一定范围内变化时，变化的过程会变得很生硬，没有任何效果展示。同时窗口尺寸大于预先设定的媒体查询的宽度时，网页的展示不能在一个屏幕范围内完全展示，需要通过滑动鼠标等动作来完成全部的浏览，用户体验感就会很差[8]。因此需要灵活地设计网页属性，引人弹性化属性，将固定尺寸的内容转变成百分比展示形式，通过流动布局使所有的窗口展示做到平滑过渡，提高用户的体验感m〇
同时，弹性图片使图片具有弹性化性质，并随着弹性布局响应的改变而改变[1°]。例如在在
中不需要设置图片的高度宽度，否则将会固定图片尺寸，影响实现的效果。同样方式如用在标签video，object中，也会使这些元素具有自适应显示器大小的特性，达到根据显示器尺寸自动改变自身大小的效果，从而自适应匹配显示器[11]。但媒体查询、流动布局、弹性图片这些响应式关键技术，还需要通过标记语言和层叠样式表这两种计算机语言去实现。
1.3响应式网页使用的计算机语言
响应式网页使用的计算机语言是超文本标记语言HTML5和层叠样式表CSS3。超文本标记语言是标准通用标记语言下的一个应用，它通过标记符号来标记要显示的网页中的各个部分。层叠样式表是一种用来表现HTML5的计算机语言。CSS3为HTML5标记语言提供了一种样式描述，定义了其中元素的显示方式。
1.3.1超文本标记语言HTML5
HTML5是一种建立网页文件的语言，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容，如：文字如何处理，画面如何安排，图片如何显示等。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止执行过程。HTML5定义了网页内容的含义和结构，简单来说就是把网页分割成一个一个的矩形，然后把这些矩形嵌套起来，形成层级关系，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局。
1.3.2层叠样式表CSS3
CSS3是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和显示方式。它可以把网页本身的主题内容和网页设计的格式进行有效的分开，即CSS3样式的信息作为独立的一个文件存放，以便设计者对网页文档进行有效集中的统一管理。网页设计中，CSS3样式文件建立后是一个独立的文件，可以被其他HTML5文件共享使用，这样设计者就不用对网页中的文件格式进行反复的操作设计，把主要精力和时间放在网页主要内容和功能上，大大减少了不必要的设计工作和时间。
另外利用CSS3可以灵活地使用响应式设计模式实现移动互联网站点[12]。如果终端设备的系统或者浏览器版本支持，利用CSS3可以实现如下功能：
(1)根据硬件显示器尺寸自适应地调整图片规格;(2)根据硬件显示器尺寸自适应地调整页面布局;(3)根据硬件显示器尺寸隐藏一些非必要模块。
HTML5和CSS3为响应式网页提供了技术支撑，实现了兼容不同终端，自行识别设备屏幕尺寸并做出相应调整。但在实际应用中，除了优秀的兼容性和流畅的自动调整功能，网页的视觉效果、辅助功能同样是吸引用户的一大亮点。
2响应式网页设计技术在移动端的应用及优化
由于移动设备的普及，越来越多的人使用移动设备查看网页，因此响应式网页设计在移动端上的应用越来越受到重视。但目前在移动端的应用上存在以下几个问题：网页的过度装饰化导致在移动端的网页加载速度变慢;网页信息量逐渐变大，导致信息查找变得更加困难;人们使用移动端网页更加频繁，这使得人们对于网页的体验感有更高的要求。所以，响应式网页设计技术在移动端的应用中需要进行视觉优化和响应式导航优化来解决以上问题。
2.1视觉优化
视觉优化主要分为网页整体界面设计效果优化和细节优化。网页整体界面设计效果优化是改变曾经过于繁复、具体化的设计风格，采用更简洁的设计方法，这种更加抽象式的设计风格被称为扁平化设计。细节优化则包括很多方面，例如添加动画效果等，提高网页的趣味性。
2.1.1扁平化设计
扁平化是对拟物化设计的一种变革，不同于拟物化像素级的细致刻画和繁复多样的效果设计，扁平化对图形进行抽象、简化和平面化处理，省略掉了所有仿真元素，在处理不同区域、显示网页重点上倾向于大胆使用色彩的碰撞。拟物化通常仔细刻画存在于现实世界中的物体，在屏幕上最大限度地呈现其物理特性和质感，提供逼真的视觉体验感，这样的设计会给浏览者留下深刻的印象。但在移动端应用上，拟物化这种较为细致繁复的设计方法无法在小屏幕上展现其优势，因为拟物化界面往往以某种主流设备屏幕尺寸为标准，只能在这种尺寸的屏幕上完美展示它的设计效果。这样设计出来的网页界面无法适应所有设备，当在小尺寸设备上显示时，其缺陷就一览无余，不仅使界面杂乱不堪，还会使网页加载速度减慢。扁平化设计回归网页的本质，是为了让使用者关注信息本身，而不是界面的装饰美等辅助因素。采用扁平化设计是目前移动端网页设计的必然趋势，并不能仅仅归因于为了迎合这种迅速风靡的设计潮流，而是扁平化恰恰能高效地配合响应式设计，适应于不同分辨率下的显示，与响应式的设计有着天然的兼容性。
2.1.2添加动画效果
虽然扁平化设计秉承简洁的设计理念，但不意味着网页设计粗糖简单。如果界面设计不注重细节，用户就感受不到它的品质，无法得到用户群体的青睐。而添加一些动画效果，不仅有利于提升网页的视觉效果，提高网页品质，而且可以消解用户在使用中产生的一些负面情绪。例如，容易被忽略的加载动画，等待和加载几乎是网页跳转过程中必然存在的过程。它起到承前启后的作用，富有趣味性的动画效果可将令人生厌的等待过程转化为令用户愉悦的细节体验，是强化用户第一印象的重要组件。
2.2响应式导航优化
导航是网站的核心功能之一，导航设计的成功与否，直接关系到用户体验是否良好[13]。在信息繁复多样的网站里，如果网络页面杂乱导致用户无法快速找到想要的信息，那么这个网页设计必然是失败的。而导航能将信息统一并归类，使页面看起来整洁有序。例如，将宽屏网页转化到小屏设备上时，导航将对多余的信息进行归纳，形成狭长的导航条。因此研究导航对于网页设计的美观和实用性具有重要的意义。
2.2.1非响应式导航的缺陷
传统非相应式网页设计采用固定布局，而针对移动设备设计的移动端网页采用流式布局，导致非相应式导航无法在移动端上正常使用，常导致的问题有：(1)占据过大空间。传统网页导航为了使用方便，一般会使用面积较大的导航，而在移动端显示时，导航的面积过大会挤压、覆盖网页内容，并且当页面被等比例缩小后，选项会显示不清或者不完整，严重影响用户使用体验。(2)无法调整布局。响应式导航可根据页面大小调整自身大小和布局，例如在较小屏幕上显示时，导航可自行折行显示，调整选项大小以达到最佳的效果，但传统网页导航只能按照一种方式显示，不能适应移动端的屏幕变化。
2.2.2常见响应式导航
非响应式导航的缺陷限制了它在移动端上的应用，网页设计者越来越青睐响应式导航。而导航设计也并非只是考虑其实用性，在网页设计上，保证导航功能性的同时，也需要考虑导航占据屏幕空间是否过大，是否符合大多数人使用习惯等问题。通过学习国内外响应式网站的导航系统，列出多种常见响应式导航：
(1)顶部导航顶部导航一直是各大网站常用的导航栏设计，其设计特点是将所有导航项平铺在网页顶部。这类导航简洁明了，不会隐藏在初始状态下的网页中，可以让用户迅速寻找到所需信息。顶部导航这样的设计形式保守但目的性强，可以确保组织结构的可靠和降低用户寻找的时间成本，也无需依赖JavaScript，保证了导航本身的兼容性，不必打破原有的CSS样式[14]。但这类导航的缺点在于当导航项较多时，网页美观性将大大降低，另外在小屏设备上，既占据过大的面积，也容易误触。
(2)侧滑导航侧滑导航又称抽屉导航，在不需要时隐藏在可视范围之外，通过触发特定按钮，导航项从屏幕侧边滑出。这种隐藏式导航栏可以节省较大的网页空间，使界面较为简洁，而滑动的特效也会为网页增添色彩。但在小屏设备上，这种滑动式的页面设计不一定能完美展现其优势。宽度大的侧边栏在窄小的屏幕上会出现文字堆叠、显示错位等问题。另外对于一部分用户而言，侧滑式导航不是那么直观，特别是用户对导航结构不清楚的情况下，很难找到触发按钮。
(3)底部导航底部导航是一种不太常用的导航设计，其位于一个页面的底部。采用这种导航系统的网页更加侧重于快速给予用户信息，将一些不重要的信息整理成导航置于网页底部。部分网页在设计底部导航时加人了锚点连接技术，用户可点击指定按钮，直达网页底部使用导航。底部导航的优势在于用户可优先浏览网页内容，对于结构、内容较为简单的网页来说较为适宜。
(4)滚动式导航滚动式导航分为水平滚动和垂直滚动。水平滚动在小屏设备上较为常见，由于屏幕较窄，当导航项较多时，水平滚动可避免折行显示，大大提高网页美观性。而垂直滚动更适宜电脑端网页，当使用鼠标滚轮滚动的时候，网页的滚动特效不会让用户产生交互上的错位感，反而形成一种新的视觉效果。
(5)悬浮按钮导航悬浮按钮导航是一种始终保持在页面最上层的小型触发式导航，通常在小屏设备上使用。其优势在于用户可改变悬浮按钮在页面上的位置以防止按钮遮挡内容，且悬浮式按钮导航不随页面滚动而移动，方便用户随时使用。
3结束语
主要介绍了响应式网页的核心技术和响应式网页设计技术在移动端的应用及优化。随着软硬件方面的不断发展，响应式网页的需求会不断增大。但目前，国内还缺乏优秀且完整的响应式网页设计，例如，etao的首页和新浪网的频道首页虽然采用了响应式设计，但也只限于部分模块，并没有实现整个网站的响应式设计。国内缺乏响应式网页设计的主要原因有两点：[1]响应式虽然是一种很好的方案，但并不是万能的。对于一些以展示为主、交互较少的网站，响应式确实是一种不错的解决方案。但对于一些信息量较大、交互较为复杂的网站(例如各类大型电商、门户、后台管理系统等)，响应式未必是最合适的解决方案。(2)由于国内用户使用的版本不高，响应式网页需要适配多种多样的浏览器、技术成本较高，这是阻挡响应式网站发展的一个重要问题.
响应式是一种非常好的设计思路，为Web的跨设备兼容提供了一种高度可用的可能性。如果能解决技术门槛的问题，响应式建站一定会成为未来企业官网的主流。目前一些响应式云建站系统在积极地解决这些技术问题，也期待响应式网页未来能被市场接纳，得到广泛的应用。