HTML5+CSS3程序设计第15章-响应式网课件.ppt

1、响应式网页设计的概念响应式网页设计的概念响应式网页设计是目前流行的一种网页设计形式，主要特色是页面布局能根据不同设备（平板电脑、台式电脑或智能手机）下能让内容适应性的展示，从而让用户在不同设备都能够友好的浏览网页内容。响应式网页设计的案例（淘宝、小米）响应式网页设计的案例（淘宝、小米）淘宝网淘宝网 PC端端淘宝网淘宝网 移动端移动端响应式网页设计的优点响应式网页设计的优点（1）对用户友好。响应式设计可以向用户提供友好的网页界面，可以适应几乎所有设备的屏幕。（2）后台数据库统一。即在电脑PC端编辑了网站内容后，手机和平板等智能移动浏览终端能够同步显示修改之后的内容，网站数据的管理能够更加及时和便

2、捷。（3）方便维护。 如果开发一个独立的移动端网站和PC端网站，无疑增加更多的网站维护工作。但如果只设计一个响应式网站，维护的成本将会很小。响应式网页设计的缺点响应式网页设计的缺点（1）增加加载时间。在响应式网页设计中，增加了很多检测设备特性的代码，比如设备的宽度、分辨率和设备类型等内容。同样也增加了页面读取代码的加载时间。（2）时间花费。比起开发一个仅适配PC端的网站，开发响应式网站的确是一项耗时的工作。因为考虑设计的因素会更多，比如各个设备中网页布局的设计，图片在不同终端中大小的处理等。技术原理技术原理（1）标签。位于文档的头部，不包含任何内容，标签是对网站发展非常重要的标签，它可以用于鉴

3、别作者， 设定页面格式，标注内容提要和关键字，以及刷新页面等， 它回应给浏览器一些有用的信息，以帮助正确和精确 地显示网页内容。在移动设备上设置视口的宽度。（2） 使用媒体查询（也称媒介查询）适配对应样式。 通过不同的媒体类型和条件定义样式表规则，获取的值可以设置设备的手持方向，水平还是垂直，设备的分辨率等。（3） 使用第三方框架 。比如 使用Bootstrap框架，更快捷的实现网页的响应式设计。概念概念像素像素：全称为图像元素，表示数字图像中的一个最小单位。屏幕分辨率屏幕分辨率：就是屏幕上显示的像素个数。以水平分辨率和垂直分辨率来衡量大小。51购商城Logo的放大界面水平分辨率和垂直分辨率水

4、平分辨率和垂直分辨率分辨率16001200的意思是水平方向含有像素数为1600个，垂直方向像素数1200个。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。设备像素设备像素设备屏幕大小（英寸）屏幕分辨率（像素）像素密码（ppi）MacBook13.31280*800113华硕R405141366*768113iPad9.71024*768132iPhone 4S3.5960*640326小米手机24.31280*720342魅族MX4.71280*800347设备像素设备像素是物理概念，指的是设备中使用的物理像素CSSCSS像素概念像素概念CSS像素是网页编程的概念，指的是CSS样式

5、代码中使用的逻辑像素。在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。桌面浏览器中的视口桌面浏览器中的视口视口的概念，在桌面浏览器中，等于浏览器中Window窗口的概念。移动浏览器中的视口移动浏览器中的视口移动浏览器中的视口：分为可见视口和布局视口。常用常用viewportviewport宽度宽度 设备宽度（px）iPhone980iPad980Android HTC980Chrome980IE1024viewport属性表示设备屏幕上能用来显示网页区域，具体而言，就是移动浏览

6、器上用来显示网页的区域。常用属性及意义常用属性及意义属性值含义width设定布局视口宽度height设定布局视口高度initial-scale设定页面初始缩放比例 （0-10）user-scalable设定用户是否可以缩放（yes/no）minimum-scale设定最小缩小比例（0-10）maximum-scale设定最大放大比例（0-10）媒体查询步骤媒体查询步骤属性值含义width=device-width设定度等于当前设备的宽度initial-scale=1设定初始的缩放比例（默认为1）maximum-scale=1允许用户缩放到得最大比例（默认为1）user-scalable=no设

7、定用户不能手动缩放（1）在HTML页面标签中，添加viewport属性的代码（2）使用media关键字单列布局单列布局单列布局。适合内容较少的网站布局，一般由顶部的Logo和菜单（一行）、中间的内容区（一行）和底部的网站相关信息（一行），共3行组成。均分多列布局均分多列布局均分多列布局。列数大于等于2列的布局类型。每列宽度相同，列与列间距相同，适合商品或图片的列表展示。不均分多列布局不均分多列布局不均分多列布局。列数大于等于2列的布局类型。每列宽度不同，列与列间距不同，适合博客类文章内容页面的布局，一列布局文章内容，一列布局广告链接等内容。单一式固定布局单一式固定布局单一式固定布局。以像素作为

8、页面的基本单位，不考虑多种设备屏幕及浏览器宽度，只设计一套固定宽度的页面布局。技术简单，但适配性差。适合在单一终端中的网站布局，比如以安全为首位的某些政府机关事业单位，则可以仅设计制作适配指定浏览器和设备终端的布局。响应式固定布局响应式固定布局响应式固定布局。同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过媒体查询技术识别不同屏幕或浏览器的宽度，选择符合条件的宽度布局。响应式弹性布局响应式弹性布局响应式弹性布局。以百分比作为页面的基本单位，可以适应一定范围内所有设备屏幕及浏览器的宽度，并能完美利用有效空间展现最佳效果。模块内容不变模块内容不变模块内容不变，即页面中整体模块

9、内容不发生变化，通过调整模块的宽度，可以将模块内容从挤压调整到拉伸，从平铺调整到换行。案例案例关键代码关键代码.bannerbackground:#EA4C89;width:100%;display:block;background-size:cover;text-align:center;padding:5em 0;media(max-width:640px).banner /*内容宽度缩小至50%*/ Width：50%； 模块内容改变模块内容改变模块内容改变，即页面中整体模块内容发生变化，通过媒体查询，检测当前设备的宽度，动态隐藏或显示模块内容，增加或减少模块的数量。案例案例关键代码关键

10、代码.login-banner-bg display: none;media screen and (min-width: 1025px) /*背景*/ .login-banner-bg display: block; float: left;小结小结本章介绍响应式网页设计的概念、优缺点和技术原理，说明移动设备中容易混淆的概念（像素、屏幕分辨率、设备像素和CSS像素）。重点讲解响应式网页设计的关键概念视口（viewport），并推荐了“模块内容不变”和“模块内容改变”的常用响应式布局技巧。上机指导上机指导关键代码关键代码.login-boxtitle img display: none;media screen and (min-width: 1025px) /*背景*/ .login-boxtitle img display: block; float: left;