基于HTML5和CSS3的响应式网页设计与实现
2020-07-13李念武汉东湖学院计算机科学学院
李念 武汉东湖学院计算机科学学院
一、响应式网页设计理念
随着智能手机和各种便携式电子产品的出现，传统针对电脑端的网页设计技术无法保证网页在这些移动设备上有很好的显示效果和用户体验，但是如果针对每一款设备单独开发一个网站这样不仅增加了开发的成本，也给网页设计师们带来了许多重复性的工作。而响应式Web 开发技术的出现正好缓解了这一尴尬现状。
响应式Web设计开发思想，最早在2010年5月由国外著名网页设计师提出。核心思想是页面的设计与开发应当根据用户行为以及所使用设备的软硬件环境进行自动调整，这些软硬件环境包括：平台的系统，浏览器窗口，屏幕大小，屏幕定向等。
响应式网页开发的核心是指在对页面进行设计时，充分考虑移动设备的屏幕大小、分辨率的特性等。应优先考虑移动设备的这些特性，然后在设计页面时从最小尺寸的展示效果入手进行版面设计与布局，在布局满足了最小尺寸的屏幕显示以后再逐渐加大显示尺寸，调整布局内的各个模块的排列方式，使每个元素的显示效果，长宽高等参数能自动适应浏览器窗口及终端设备的屏幕分辨率。在小尺寸显示时，可以适当降低图片素材的分辨率，文字内容部分可以尽量以标题的形式少量出现，具体内容可以放在子页面中展示。然后当窗口或设备的显示尺寸变大时，内容慢慢丰富，图片逐渐清晰。
二、核心技术
（一）HTML5
HTML5是一种具有跨平台特点的网页设计语言，其语法结构不受任何平台和系统的限制，编写灵活简单，且适用于现有的主流操作系统、主流的终端设备。这一特点正好与“响应式网页设计”中的跨平台不谋而合，HTML5语言跨平台的兼容性使得它在响应式开发中有着得天独厚的优势。
（二）CSS3
CSS3 中新增的媒体查询 （Media Queries） 模块提供了向终端设备或显示平台查询媒体类型的功能，通过添加规范的查询表达式来实现对当前媒体显示效果的自动匹配。
（三）流动网格
流动网格布局使得各层块的位置具有浮动特性，图片、文字等网页元素的属性单位会由以前的像素为转变成以百分比或者是字体比例的形式。如：某DIV块的宽由100px变成20%等。这样一来网页元素的尺寸就能灵活地根据媒体查询的结果来自动调整显示值。
（四）弹性图片
弹性图片是指图片的大小具有弹性。或一幅图片在800像素以上宽度的设备上显示为 480px＊480px，那么用弹性图片的设计原则，其宽和高则可以同时设置为60%。这样一来当页面在320像素宽的设备上显示时，图片的大小则会自动调整为192px＊192px。
三、网页设计与实现
（一）布局设计
本文以企业网站面面为便来完成响应式网页的设计与实现。网页的布局应达到自动适应PC机、平板电脑、手机等终端设备的显示效果。整个页面分为七大模块：#header-wrap(logo)、#main navigation、#layerslider、#home-intro、#feature-block、#intro-features、#copyrights。七大模块在页面中分布于七行，占满浏览器整个窗口宽度。其中#feature-block模块被分成三列，#intro-features模块包含四列。这两上模块将会通过媒体查询来改变其列宽，以实现响应式布局的效果。
（二）viewport设计
自动适应终端设备的显示效果，首先必须要通过视口viewport来获取到显示设备或窗口的当前宽度值，同时还可以调整显示窗口的大小以适应设备，然后设置窗口大小固定，禁止用户对显示窗口进行放大缩小操作。
（三）媒体查询设计
本网站设置了三种不同的媒体查询功能，分别适用于窗口宽度介于768px-959px的PC端、480px-767px、320px-479px的移动终端。在移动终端设备上原有的导航栏将被设置为不可见，将菜单放置于一个“
（四）弹性设计
本网站中的弹性设计理念主要体现在字号、图片大小以及内外边界值的自动适应。在弹性设计中，所有参数值都用相对大小，即百分比或em。被设置为相对大小的元素将会根据浏览器窗口的大小来自动调整其显示的像素值，既降低了代码的复杂度又很好地提升了用户体验。
（五）最终效果实现
本文最终实现的企业网站能自动适应用户端的设备大小，会根据显示设备的屏幕宽度来自动匹配对应的布局方案，图片的显示以及文字内容的展示，模块的排列对齐方式都会进行相应的调整，保证网页的跨平台显示效果。
四、结论
本文通过实际案例验证了响应式网页设计的有效性和可行性，本网站完全基于HTML5和CSS3开发，应用了先进的响应式网页设计体现实现了网站的“一次设计，普遍使用”的特点。对于开发者而言开发效率更高，更新方便，具有的特点，有效果地缩减了时间成本和人力成本。对于用户而言，无论是在PC端还是在平板或者手机端都体验风格内容一致的网站，用户体验较好。
