基于HTML5和CSS3的响应式网页设计与实现

李念 武汉东湖学院计算机科学学院

一、响应式网页设计理念

随着智能手机和各种便携式电子产品的出现，传统针对电脑端的网页设计技术无法保证网页在这些移动设备上有很好的显示效果和用户体验，但是如果针对每一款设备单独开发一个网站这样不仅增加了开发的成本，也给网页设计师们带来了许多重复性的工作。而响应式Web 开发技术的出现正好缓解了这一尴尬现状。

响应式Web设计开发思想，最早在2010年5月由国外著名网页设计师提出。核心思想是页面的设计与开发应当根据用户行为以及所使用设备的软硬件环境进行自动调整，这些软硬件环境包括：平台的系统，浏览器窗口，屏幕大小，屏幕定向等。

响应式网页开发的核心是指在对页面进行设计时，充分考虑移动设备的屏幕大小、分辨率的特性等。应优先考虑移动设备的这些特性，然后在设计页面时从最小尺寸的展示效果入手进行版面设计与布局，在布局满足了最小尺寸的屏幕显示以后再逐渐加大显示尺寸，调整布局内的各个模块的排列方式，使每个元素的显示效果，长宽高等参数能自动适应浏览器窗口及终端设备的屏幕分辨率。在小尺寸显示时，可以适当降低图片素材的分辨率，文字内容部分可以尽量以标题的形式少量出现，具体内容可以放在子页面中展示。然后当窗口或设备的显示尺寸变大时，内容慢慢丰富，图片逐渐清晰。

二、核心技术

（一）HTML5

HTML5是一种具有跨平台特点的网页设计语言，其语法结构不受任何平台和系统的限制，编写灵活简单，且适用于现有的主流操作系统、主流的终端设备。……