吴多智， 陈益全

（琼台师范高等专科学校, 海南　海口　571127）



响应式网页设计案例实现与分析

吴多智， 陈益全

（琼台师范高等专科学校, 海南海口571127）

摘要：指出传统网站对各类智能移动设备的兼容性不足。介绍响应式网页设计的概念、设计思想、相关技术等。以实际案例讲解响应式网页的设计与制作流程。分析与总结响应式网页设计的步骤与技术要点，为响应式网站开发提供技术参考。

关键词：响应式网页设计；网页案例；网页制作；网页分析

一、引言

在当今移动互联网时代，人们更多的使用智能移动设备浏览网站。对于传统的针对显示器屏幕开发的网站，对各种屏幕尺寸不一的智能移动设备在兼容性方面表现出严重不足。其中一种解决方案是另外专门开发移动版网站，但会使得成本提高。另外一种解决方案是对原有网站按照响应式网页设计方式重构，让网站能够兼容各式各样的浏览器分辨率以及不同移动设备，而不是为每个终端做一个特定的版本，成本不高。响应式网页设计凭借其优势在越来越多的网站中被运用。本文以一个案例来讲解与分析响应式网页的设计实现过程，望能为网页前端工程师进行响应式网站开发提供参考。

二、响应式网页设计案例实现

（一）概念介绍

响应式网页设计(Responsive Web design)指页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。无论用户正在使用笔记本电脑、iPad还是智能手机，所要浏览的页面能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。……