响应式网页开发基础教程(jQuery+Bootstrap)第1章响应式网页设计基础课件

1、第1章 响应式网页设计基础1响应式网页设计基础什么是响应式网页媒体查询响应式网页呈现本章实训什么是响应式网页示例：Ethan Marcotte个人的响应式网页https:/手动拖动鼠标改变浏览器窗口的大小，在不同浏览器窗口尺寸下，页面显示是否有变化？自动适应、流式网格布局、流式图像显示3什么是响应式网页“自适应网页”就是 响应式网页 ?不同浏览终端打开的并非同一个地址、同一个网页，这种不是真正的响应式4什么是响应式网页响应式网页的核心思想：“一次设计，普遍适用”不管使用什么设备，打开及显示的都是同一个地址、同一个网页，布局及显示适应不同的浏览环境什么是响应式网页响应式网页的特点媒体查询及应用媒

2、体查询（Media Query）是CSS 3 中获取用户行为和设备环境（比如屏幕宽度、屏幕分辨率、设备方向等）并适配相应的CSS 规则的过程，可以让CSS 能更精确地作用于不同的媒体类型和同一媒体的不同条件，也可以为一些特定的输出设备定制特定的显示效果，从而为不同终端的用户都能提供较好的浏览体验。关键字：media媒体查询对浏览器的支持7媒体查询及应用CSS 3 媒体查询定义语句的基本格式：media (适用条件1) and/or (适用条件2)适用的CSS 样式8媒体查询及应用例1-1media screen and (max-width: 300px)bodybackground-colo

3、r:lightblue; 例1-2media screen and (min-width:960px) and (max-width:1200px)bodybackground:yellow; 9媒体查询及应用媒体查询支持的媒体类型对所有媒体类型都适用： media all 指定适用于多种设备：media screen and speech 只适用于某种设备：media only screen10值描述all用于所有设备print用于打印机和打印预览screen用于彩色屏幕，平板电脑，智能手机等。speech应用于屏幕阅读器等发声设备媒体查询及应用常用媒体特性11属性描述device-heig

4、ht，device-width定义输出设备的屏幕可见高度及宽度max-height，max-width定义输出设备中的页面最大可见区域高度及宽度min-width，min-height定义输出设备中的页面最小可见区域高度及宽度max-device-height，max-device-width定义输出设备的屏幕最大可见高度及宽度min-device-height，min-device-width定义输出设备的屏幕最小可见高度及宽度orientation定义输出设备中的屏幕方向。取值可以是portrait（纵向）或landscape（横向）resolution定义设备的分辨率。如：96dpi（每

5、英寸点数），300dpi，118dpcm（每厘米点数）等媒体查询及应用例1-3media only screen and (max-width: 500px) body background-color: lightblue; 例1-4media screen and (min-width:900px).wrapperwidth: 980px;例1-5media only screen and (orientation: portrait) body background-color: lightblue; 例1-6media screen and (max-width:720px) and

6、(min-width:320px) body background-color:red;12媒体查询及应用动手练习 试增加媒体查询条件及属性，观察网页变化#test background: silver;width: 400px;height: 200px;margin: auto;media screen and (min-width:600px)#testbackground:#EBEA89;13响应式网页呈现作用：让当前屏幕可视区域的宽度等于设备的宽度，同时不允许用户手动缩放。常见设备的默认viewport14设备类型iPhoneiPadAndroid SamsungAndroid HT

7、CChromeOpera PrestoIE默认viewport980px980px980px980px980px980px1024px响应式网页呈现viewport常用属性15属性描述width设置窗口显示的最大宽度，为一个正整数，或字符串width-deviceheight设置窗口显示的最大高度，这个属性很少使用initial-scale设置页面的初始缩放值，为一个数字，可以带小数minimum-scale允许用户的最小缩放值，为一个数字，可以带小数maximum-scale允许用户的最大缩放值，为一个数字，可以带小数user-scalable是否允许用户进行缩放操作，值为no或yes（0或

8、1），no代表不允许，yes代表允许响应式网页呈现绝对大小单位：px（像素）相对大小单位：%（百分比）、em、rem等。em:相对于当前元素的父元素 rem:相对于根元素16 响应式网页呈现响应式图像适配根据屏幕像素密度或屏幕宽度来匹配不同的图像文件:根据屏幕的宽度来匹配不同的图像文件:使用类似媒体查询语句来设置图像的大小响应式图像适配实例17本章实训：创建一个响应式网页试增加不同页面元素及媒体查询条件，观察页面变化18Thank you!PPT模板下载：/moban/ 行业PPT模板：/hangye/ 节日PPT模板：/jieri/ PPT素材下载：/sucai/PPT背景图片：/beijing/ PPT图表下载：/tubiao/ 优秀PPT下载：/xiazai/ P