响应式设计在B2C电子商务网站中的应用与实现研究

hwyzw

    王鹏1、董爱华1,2、鲍萍萍1

    （1.东华大学信息科学与技术学院，上海；2.数字纺织服装技术教育部工程研究中心，上海）

    摘要：随着移动互联网技术的快速发展，上网的移动设备数量呈爆炸式增长。为了解决网站与未来新设备的兼容性和可访问性，为PC和移动用户提供更舒适的访问界面和速度，设计为响应式。我们分别对响应式元素和媒体、响应式可伸缩布局、响应式字体和图片、响应式框架进行了讨论和研究，最终将响应式相关技术应用到B2C电子商务网站的设计中。

    0简介

    中国移动互联网用户数量已超过PC互联网用户。据中国互联网络信息中心（CNNIC）数据显示，截至2014年6月，我国移动互联网用户规模达5.27亿，覆盖率达83.4%，超过传统PC整体使用率80.9%。首次使移动互联网用户成为最大的互联网群体[1-2]。

    响应式网页设计（RWD）是由伊森·马克特（Ethan）于2010年提出的。该技术是现有三种新技术的组合——流体布局（fluid grids）、媒体查询（media）和弹性图片（ ）[3-4] 。通过响应式设计模型，网站可以自动响应不同的终端，动态改变网页的布局和元素的样式，在不同的终端下精美地呈现相同的内容，如图1所示。

    从响应式Web设计的提出到2014年，业界对于响应式Web的设计预测一直非常乐观。在2015年Web设计趋势预测中，响应式仍然是热点[5]。虽然现有的三项技术是响应式网页设计的关键，但它们并不是全部。随着各种互联网终端设备的出现，响应式网页面临设备不兼容、运行效率低等诸多问题[67]。为此，本文提供了响应式网页设计的相关技术手段和设计方法，并应用于实践。

    1 响应式网站的设计方法

    1.1 使用元标签

    在移动设备上浏览网页时，大多数浏览器默认为正常页面尺寸。由于移动设备分辨率较小，页面元素会显得不清晰。为此，您可以使用元标记，它是一个虚拟“窗口”，可以自动响应移动设备的宽度和高度，使页面的字体和图像自适应清晰。

    在HTML的头部嵌入以下代码将自动适应屏幕的宽度和高度。

    1.2CSS中的媒体查询

    @media query可以针对不同的浏览器窗口大小设置不同的CSS样式。当网页在不同的终端设备上浏览时，页面可以响应不同的页面布局。 CSS语法如下：

    @media and|not|only (media ) { CSS 代码;}

    您还可以针对不同的设备使用不同的：

    测试结果如图2和图3所示。

    1.3 伸缩式布局

    常规布局一般是基于块式和内联流式布局方法。其方向是确定的，缺乏灵活性。采用flexflow流式布局方式，可以从左到右、从右到左、从上到下、从下到上等多个方向对网页元素进行布局。

   

    该布局是一个可扩展的盒模型，可以很容易地做成具有可扩展功能的布局。使用 Flex 布局的元素称为 Flex 容器（flex），简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex items），简称“项目”[8]。布局的思想是，可伸缩容器可以灵活地改变可伸缩项的宽度、高度和出现顺序，以最合理的布局填充屏幕。

    考虑到浏览器兼容性，任何容器都可以通过添加以下语法来指定为 Flex 布局。

    盒子{ : 盒子; ：mozbox； :ms;:flex;:flex;}

    然后通过设置不同子元素的属性，就可以创建响应式的灵活布局。测试结果如图4、图5和图6所示。

    1.4 响应式文字和图像

    1.4.1 响应式文本

    响应式网页不仅可以自适应调整页面布局，还可以根据屏幕的大小自动改变文字和图像的大小。常用的字体单位em和rem分别根据父元素和根元素（html）而变化，与用户屏幕无关。对此，引用了一种新的字体大小单位：[9]。

    用vw和vh分别表示高度和宽度，1个单位等于窗口大小的1%。还可以通过vmin和vmax设置最大值和最小值（例如：1vmin取1vw和1vh中较小的值）[9]。

    1.4.2 灵活的图像

    为了使图像响应浏览器窗口大小，只需为图像设置以下CSS样式：

    img {宽度：100%; ： 汽车;}

    1.5 响应式框架

    随着移动终端的推广，各种移动系统不断涌现。光是苹果和安卓系统的尺寸就各不相同，更不用说其他平板设备了。为了统一移动设备的用户界面（UI），提出了移动开发框架。由于它是纯粹使用HTML、CSS开发的，是移动浏览器的标准，因此可以解决多个移动终端的兼容性问题。

    通过使用它，你可以“写更少的代码，做更多的事情”，并且它可以以灵活简单的方式布局网页[10]。使用开发网页需要在网页中引用库（.js）和CSS样式表（.css）。

    参考方式有两种：一是直接从CDN链接，二是从官网下载应用。为了使用官方最新版本，本文采用第一种方法。直接复制代码到网页即可

    2响应式网站的应用

    2.1 项目介绍

    网上服装商城是公司为客户建立的B2C电子商务网站。通过线下仓库和线上平台实现线上销售服装的功能。由于页面采用响应式布局，用户可以通过不同的终端设备浏览网站并完成购买功能。系统稳定、可靠、兼容性好。

    2.2 系统设计

    系统分为两部分：前端部分和后端部分。前端部分主要是用户完成购物功能，后端是管理员系统，主要完成服装分类管理和订单管理。本设计将网站打造为响应式网站，分别设计前端、后端和数据库，最后进行测试。

   

    前台（顾客购买）部分：对于用户系统来说，主要包括注册会员、登录、查询服装、添加购物车、生成订单、支付等功能。

    后台（管理员管理）部分：整个系统的运行和服装更新的重要部分。其功能主要包括添加服装、订单管理、删除服装、查看订单详情、发货等。另外还设置了用户访问权限，提高了后台系统的安全性。

    基于系统功能分析，所设计系统的前端功能模块如图7所示。

    3结论

    本文从实际问题出发，针对网站开发过程中存在的问题。图7 系统前端功能模块图

    本课题介绍了响应式网站的设计方法，为跨终端设备浏览网页提供了可行的解决方案。最后，理论与实践相结合，开发了响应式在线服装商城系统。

    随着越来越多的移动终端加入互联网，移动互联网已占据半壁江山。响应式网站可以为用户提供更加舒适的界面和用户体验，已经成为大势所趋。虽然响应式网页设计的优势和趋势已经被广泛认可，但由于很多前端工程师对其并不熟悉，响应式网站的设计模型仍然存在很多技术难点，比如对老版本IE的支持较差等。 、加载时间长等，因此很难在短时间内流行起来。但可以肯定的是，为了迎合未来移动互联网的发展趋势，响应式网页设计将是未来网站设计的主流。

    参考

    [1] 三川. CNNIC发布第35次《中国互联网络发展状况统计报告》[J].中国远程教育，2015(2)：3131。

    [2] 赵大雷，张正平，何松，等。基于移动互联网的健康监测系统研究[J].微型计算机及其应用，2014，33(8)：1012。

    ［3］张新辉.响应式网页设计研究［J］.电子技术与软件工程，2014，40(18)：5757。

    ［4］洪永军.移动终端屏幕自适应网页设计［J］.微型计算机及其应用，2014，33(3)：6566。

    ［5］他. ［EB/OL］.(20150918)［20161220］

    [6]余宜生.移动终端网页优化处理研究[J].电子技术应用, 2014, 40(7): 126129.

    [7] 高继荣，田岩，蒋小燕。基于树结构的网页适配方法研究[J].微型计算机及其应用，2014，33(1)：7780。

    ［8］ C. ［EB/OL］指南。 (20151012)［20161220］//css/aguideto/.

    ［9］ ALLEN R.仅CSS的类型及更多［EB/OL］.(20151013)［20161220］@/typewithonlycss#. xwa。

    [10]。简介[EB/OL]。 (2015-12-01) [2016-12-20]