关于响应式网站的设计与开发研究

赵文艳

摘 要： 作为开发策略与设计哲学，响应式网站设计是一项能够与PC、平板电脑、手机等设备相适应的网页浏览技术，该技术以CSS媒体查询为基础，配合不同环境，结合媒体查询技术。本文介绍了一个以Bootstrap框架模板为基础的响应式网站，报告如下。

关键词： 设计与开发；响应式网站；研究分析

当前我国已经全面进入移动信息时代，移动用户量已经趋于饱和，平板、手机等移动设备成为民众生活中的重要信息工具，为了改善用户在浏览网页过程中的体验，本文专门介绍了响应式网站技术。首先，响应式网站无论在PC端、平板还是手机上，均只设置一个URL接口；其次，响应式网站设计通过媒体查询来实现灵活性设计，获取设备屏幕属性、分辨率、设备类型等方面的信息，在布局过程中实现求同存异；第三，通过响应式设计来适配手机，实现多终端、多平台服务的一致性。

1.响应式网站设计概述

1.1响应式网站设计特点

第一，以百分比单位进行流体式布局与以像素为单位进行固定布局的传统技术有着本质性不同；第二，通过CSS语法规则进行媒体查询，模式的控制以参数为指导，依照不同设备中特有的CSS对界面进行渲染，进而实现与用户设备环境的适配；第三，响应式设计的目标在于提高网页对于各种不同设备的兼容性。在设计过程中需要对各种不同的边界进行划分，对页面布局进行调整，对分辨率的“断点”进行有针对性的设定。

1.2广义的响应式开发流程

依照EthanMarcotte的定义，响应式开发重点研究参考分辨率，即原本的字体、界面或网格为指定分辨率而设，为了能够与不同的设备环境相适配，需要融入媒体查询功能。若采取“移动优先”的设计思路，对于PC桌面的兼容性就比较差。因此，在具体的设计过程中，需要事先依照小屏的需求对网页进行设计，再通过媒体查询功能，配合不同的屏幕分辨率。

1.3响应式设计的优点

在响应式设计体系下，仅仅通过一个代码库就能够对市面上所有的设备与浏览器的兼容性问题进行处理。各种网页应用环境下的不确定性可以通过灵活性的设计思路来进行化解，该技术的应用优势主要体现在以下几个方面：

第一，对服务器进行简化。在响应式设计具有充分合理性的情况下，小心地使用图片，则能够有效解决设备性能方面的问题，在应对所有设备与所有用户的过程中，也能够为服务器端设计出一个最小化、的逻辑；第二，更容易维护。在响应式设计技术的支持下，相关的维护工作只需要服务于一套前段代码库；第三，所需要投入使用的搜索引擎只有一个，单一的URL列表与单一的网站会使网站的设计工作更加容易；第四，支持未知设备。响应式设计不需要考虑操作系统与设备的性能，网站设计的自动适配性与兼容性得到进一步的提升。

2.CSS概述

CSS属于层叠样式的一种，相比于传统表格布局来说，CSS布局能够对页面的模式与版式进行更加自由的控制。通过CSS对模式进行定义的优点在于它一方面能够对对齐、尺寸以及字体等方面的格式属性进行控制，同时也能够通过特殊效果、位置等方面的NTML属性进行控制。常见的CSS前端框架主要包含Bootstrap by Twitter、U1K1t by Y00theme、Foundat1on by ZURB、Semantic UI、Pure by Yahoo等。

3.响应式网站的设计

本次研究以Bootstrap响应式框架为基础来改进某校实验中心网站。Bootstrap中自带许多网页制作常用的样式、组件和JS插件，依照其不同的功能与用途进行划分，划分内容如下：第一，全局CSS样式。全局CSS样式能够以跨浏览器的情况下对HTML元素进行标准化处理，将部分基础模式添加至设计内容中；第二，组件。Bootstrap组件近20种，单导航组件就有形式不同的多个样式，比如侧导航和导航栏等，通过专门的分布或面包屑来对文章进行分页翻阅；第二，JavaScript插件。JavaScript插件是基于Jquery实现的，它提供了许多动态效果，插件为 Bootstrap 的组件增添了“活力”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。

本文以Hbulider为设计工具，制作一個sitel.master页面，将网站logo设置在网页顶端，为网页专门设置一个导航栏，导航栏与图片logo均为响应式，适配各种不同的分辨率，分辨率尺寸在768px的情况下，导航栏会变换为包含各种按钮的长条，再对区域内容布局。

结束语：

以灵活界面为基础是响应式网站设计的最大特点。具体工作是能够使各种不同的移动或非移动设备可以高效地对网页进行浏览，改善用户的浏览体验。在响应式技术的支持下，能够使网页布局与各种不同的设备相适应，在不同的硬件与系统环境下实现自我调整，该技术的应用前景十分广阔。

参考文献

[1]刘金承.响应式网站的设计与开发[J].科技传播，2016，818：133-134+139.

[2]赵玲，隋欣，陈宸，胡巧龙，邓举名，关雅丽.基于SEO优化的响应式公益网站设计[J].电脑编程技巧与维护，2017，07：17-18.

[3]郑逸凡.响应式网站设计探析[J].南昌师范学院学报，2017，3803：35-37.