◆李娟丽

（运城学院 山西 044000）

传统Web前端开发均是基于一种特定设备进行设计的，各个元素的尺寸固定不变，导致所设计的页面在电脑端和手机移动端设备上进行呈现时，所显示的效果存在很大的差异，严重影响了用户的使用体验。而响应式布局的出现和应用，可以很好地解决这一问题，通过将响应式布局科学应用于Web前端开发中，确保所设计的网页适用于不同大小的屏幕，极大地提高了页面开发的效率和效果，同时，为用户带来良好的使用体验。

1 响应式页面

响应式页面主要是指针对用户行为一级系统平台、屏幕大小等设备环境，设计出具有自适应功能的页面，以达到提高用户操作体验和视觉体验的目的。这种响应式页面的出现和应用为提高网页开发效率，降低开发成本打下坚实的基础。

2 基于响应式布局Web前端开发流程

现阶段，比较流行的Web开发模型均是在参照瀑布模式的基础上进行修改得到的，通过利用响应式布局，构建出如图1所示的Web前端开发流程。

图1 基于响应式布局Web前端开发流程

2.1 计划分析与总体设计

在传统开发模式下，其开发框架图主要由以下两个部分组成，分别是布局和组件，其页面尺寸通常是固定不变的，没有任何可调整的空间和余地，一旦用大小不同的屏幕进行显示时，很容易出现横向滚动条或者空白区域，导致整个页面布局发生极大的改变。但是，响应式布局的出现和应用可以很好地避免以上不良现象的出现，通过将响应式布局科学应用于Web前端开发中，可以确保布局尺寸多样性[1]，使得所设计的页面能够更好地适应于不同分辨率尺寸屏幕。……