《网站设计与开发》 课件 项目六 响应式电子商务网站开发.pptx

项目六响应式电子商务网站开发;项目引入

近几年，随着智能手机的普及，使用手机、平板电脑等设备上网的用户越来越多。根据中国互联网络信息中心（CNNIC）发布的数据，截至2022年6月，我国网民规模为10.51亿，其中使用手机等移动设备上网的比例达99.6%。为了应对移动互联网的快速发展，起初许多企业特地为移动设备制作移动端网站，但这种方式会造成企业在网站信息维护上的麻烦，容易造成移动端和桌面端网站内容不一致的情况，花费较高人力资源成本却效果欠佳。;为了解决这个问题，追求更好的用户体验，“响应式网页设计”理念应运而生，即让一个网站同时适配多种设备和多个屏幕，网站会自动根据不同访问设备（台式计算机、笔记本电脑、平板电脑、智能手机）的屏幕尺寸进行调整，以便用最佳浏览方式来显示网页内容。

响应式电子商务网站可以让网页的布局和功能随着用户的使用环境（屏幕大小）而自动变化，可以根据不同的终端呈现合理的页面，实现一次开发、多处适用，因而得到了广泛的应用，并逐渐成为网页设计的主流，有越来越多的人采用此方法设计网站。;学习目标

知识目标

1.了解响应式网站、视口、媒体查询、图像适配的基本概念。

2.熟悉响应式布局的基本方法。

技能目标

1.会使用媒体查询语句确定访问设备的屏幕尺寸情况。

2.会使用响应式布局进行网页构建。;任务分析

响应式网站的出现打破了传统的网页布局思路，实现了一个网站在台式计算机、平板电脑和手机等各种终端设备上浏览效果的流畅性，不仅能给用户带来更好的体验，同时也提高了网站的点击率和转化率。响应式网站糅合了流式布局和弹性布局理念，通过媒体查询、自适应图片等技术来实现自动调整页面元素布局，实现网页内容随着访问它的视口及设备的不同而呈现不同的布局样式。本任务重点学习响应式电子商务网站的开发技术。;相关知识

一、响应式网站简介

响应式网站是指可以自动识别屏幕宽度，并作出相应调整的网页站点。采用响应式网页设计，页面有能力去自动响应用户的设备环境，这样一个网站能够兼容多个终端，而不需要重新设计新设备??版本尺寸。;1.响应式网站特点

响应式网站能够提升用户体验，也能让桌面端和移动端SEO和链接保持一致，进而避免内容重复或出错。响应式网页设计比较明显的缺陷是，开发时间长、成本高，大大增加了架构设计的复杂度，尤其是要构建包含额外编程的复杂的自适应网站，所需时间会更长。因此，对于已经比较成熟的网站来说，如果要实现全站的响应式，有可能需要全部推倒重来，所以更适合在移动端实现响应式布局设计。;2.响应式网站设计要点

（1）阻止移动浏览器自动调整页面大小

基于Webkit核心的IOS和Android浏览器以及其他众多的浏览器都支持viewportmeta元素覆盖默认的画布缩放设置，所以只需要在HTML的head标签中插入一个meta标签，设置具体的宽度（如像素值）或者缩放比例（设备实际尺寸的两倍）即可。;（2）将网页修改为百分比布局

页面浏览过程中超出了网页所规定最大宽度或最小宽度值时，容易出现水平滚动条，不方便用户浏览，为防止这种情况发生，需要通过百分比布局进行调整，使得页面元素能够根据窗口大小灵活修正样式，具体而言，就是CSS不会将元素宽度定义为width：npx（n表示一个整数或小数），而是会以百分比形式定义宽度，如width：n%（n表示一个整数或小数），或者直接定义为自动，如width：auto。;（3）网页元素单位用em替换px

通常网页元素单位使用px，但响应式网页需要把单位px改为em。px、em都是计量单位，都能表示尺寸，但是有所不同，而且各有优缺点。px是像素，它的大小是相对于显示器屏幕分辨率而言的，利用px设置字体大小及元素宽高等比较稳定和精确，但不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。em表示相对尺寸，它会继承父级元素的字体大小，em可以较好地适应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，如有遗漏可能会导致错误。;（4）实现流动布局

流动布局是指各个区块的位置都要设置浮动，其优势在于如果页面宽度小，无法使网页元素显示在同一行，那么，后面的元素不会发生溢出，也不会出现水平滚动条，它会自动换行至下方显示，大大提升了用户的阅读体验。;（5）MediaQuery技术的使用

MediaQuery直译过来就是媒体查询，CSS3中的MediaQuery增加了更多的功能，可以添加不同媒体类型的表达式，用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的样式表。因此，只需要设置不同的样式表，通过判断调用对应的样式就可以实现不同分辨率设备之