基于响应式技术电子商务网页重制作.docVIP

基于响应式技术电子商务网页重制作 　　摘 要：为顺应移动互联网时代的购物需求，响应式网页成为一种行业趋势。通过媒体查询、流式布局、弹性视觉媒体等响应式网页设计技术，制作了基于响应式布局的电子商务网页，实现网页与三中不同分辨率设备匹配的视觉效果，为用户提供了更加舒适的界面和更好的体验。 　　关键词：响应式页面设计；CSS3；媒体查询 　　响应式网页设计（responsive web design，RWD），由伊桑?马科特Ethan Marcotte[1]在2010年5月提出。响应式网页就是能在电脑、平板电脑、智能手机等多种终端打开的自适应式网页，这种网页能够针对不同平台、尺寸和定向进行智能化调整页面布局，为用户提供了一个比传统网页更优化的视觉体验。 　　传统网页在不同客户端显示的内容一致，用户在尺寸较小的终端需要互动手指放大或缩小页面，或调整屏幕显示的方向是横向还是竖向，非常麻烦。响应式页面通过媒体查询、流式布局、弹性视觉媒体三大核心技术[2]很好地解决了这一难题。 　　1 响应式网页关键技术 　　1.1 媒体查询 　　CSS3的媒体查询（media query）是响应式设计的核心[3]，是CSS（层叠样式表）技术的升级版本。 　　在Web页面中head部分常看到这样的一段代码： 　　代码中的media就是指特定的媒体类型，media的值可以是屏幕（screen）、打印（print）、支持所有媒体介质（all）等。 　　CSS3的媒体查询还可以获取设备的宽和高的值、设备的手持方向是横向还是竖向、设备的分辨率、色彩深度等值。 　　1.2 流式布局 　　流式布局是一种多栏布局，可以一行显示多个栏目，也可以换行显示，随着设备终端宽度不同而调整。有效避免了传统网页布局对于大小不同屏幕可能会出现大片留白或者拥挤错位的问题。流式布局将页面中栏目的宽度单位设置为相对值，使得页面布局能够灵活适应终端屏幕宽度。同时采用相对大小的字体单位，使得网页文字大小可阅读性加强。 　　1.3 弹性视觉媒体 　　响应式设计网页另一个显著优点就是图片也随着显示终端尺寸大小而自动调整至合适尺寸。实现的方式是在CSS中添加如下代码： 　　img { max-width：90%；} 　　2 基于响应式技术的电子商务网页重制作过程 　　2.1 需求分析 　　某知名服装品牌Naut为了顺应移动互联网时代的购物需求，需要对其原有主页进行重制作，以实现响应式布局网页功能。要求提供电脑端、平板端和手机端的三个主页设计文档。 　　2.2 响应式页面布局设计 　　响应式设计网页的页面需要根据不同尺寸的终端视图设计不同的布局，所以页面布局的最小单位是div、文字内容、图片和其它组成部分。针对三种分辨率下工作的设备：电脑（1440宽×900高）、平板（768宽×1024高）、智能手机（480宽×960高），分别设计了页面布局，如图1所示。 　　2.3 响应式页面制作 　　根据前期页面布局设计，网页结构分为首部（header）、尾部（footer），中间（container）。其中container 又进一步分为左部（asideleft）和右部（asideright）。其中header和footer的宽度设置为和页面宽度一致，左部宽度设置为占容器宽度的30%，右部设置为60%。 　　首先，设置网页宽度等于终端设备的屏幕宽度，在标记中间，加入一个html5标签，代码如下： 　　 　　代码中viewport指网页打开后的默认宽度和高度，device-width代表终端设备屏幕宽度。 　　接着，通过媒体查询语句获取媒体类型、设备手持方向等信息，代码如下： 　　针对不同宽度的屏幕，设置不同宽度的页面内容和布局，根据条件加载不同的CSS，部分代码如下： 　　@media screen and （min-width：768px） and （max-width： 1440px） { 　　.asideleft { 　　width： 30%； 　　} 　　. asideright { 　　width： 70%； 　　} 　　} 　　@media screen and （max-width：480px） { 　　.asideleft， .asideright { 　　float： none； 　　width： 100%； 　　}/* 网页左右部垂直排列，有时候会隐藏左部，对页面进行重构 */ 　　} 　　最后添加代码实现弹性视觉媒体等功能。 　　2.4 运行测试 　　测试显示重制作的网页在三种终端设备上正确显示，没有内容页面不合理缩放、平移、拥挤、空白和滚动条的情况出现。页面从宽屏到窄屏来回切换屏幕尺寸的时候，布局