1、第第1 1章章 响应响应式网页设计基础式网页设计基础1响应式网页设计基础什么是响应式网页媒体查询响应式网页呈现本章实训什么是响应式网页l示例：示例：Ethan MarcotteEthan Marcotte个人的响应式网页个人的响应式网页httpshttps:/:/ 响应式网页?不同浏览终端打开的并非同一个地址、同一个网页，这种不不是是真正的响应式真正的响应式4什么是响应式网页l响应式网页的核心思想：“一次设计，普遍适用”l不管使用什么设备，打开及显示的都是同一个地址、同一个网页，布局及显示适应不同的浏览环境什么是响应式网页l响应式网页的特点媒体查询及应用l媒体查询（Media Query）是C
2、SS 3 中获取用户行为和设备环境（比如屏幕宽度、屏幕分辨率、设备方向等）并适配相应的CSS 规则的过程，可以让CSS 能更精确地作用于不同的媒体类型和同一媒体的不同条件，也可以为一些特定的输出设备定制特定的显示效果，从而为不同终端的用户都能提供较好的浏览体验。l关键字：media媒体查询对浏览器的支持7媒体查询及应用lCSS 3 CSS 3 媒体查询定义语句的基本格式：media(适用条件1)and/or(适用条件2)适用的CSS 样式8媒体查询及应用例例1-11-1media screen and(max-width:300px)body background-color:lightblu
3、e;例例1-21-2media screen and(min-width:960px)and(max-width:1200px)bodybackground:yellow;9媒体查询及应用l媒体查询支持的媒体类型对所有媒体类型都适用：media all 指定适用于多种设备：media screen and speech 只适用于某种设备：media only screen10值描述all用于所有设备print用于打印机和打印预览screen用于彩色屏幕，平板电脑，智能手机等。speech应用于屏幕阅读器等发声设备媒体查询及应用l常用媒体特性常用媒体特性11属性描述device-height，d
4、evice-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(min-width:320px)bo
6、dy background-color:red;12媒体查询及应用l动手练习动手练习 试增加媒体查询条件及属性，观察网页变化#test background:silver;width:400px;height:200px;margin:auto;media screen and(min-width:600px)#testbackground:#EBEA89;13响应式网页呈现lmeta name=viewport content=width=device-width,scalable=0l作用作用：让当前屏幕可视区域的宽度等于设备的宽度，同时让当前屏幕可视区域的宽度等于设备的宽度，同时不允许用
7、户手动缩放。不允许用户手动缩放。l常见设备的默认常见设备的默认viewportviewport14设备类型iPhoneiPadAndroidSamsungAndroidHTCChromeOperaPrestoIE默认viewport980px980px980px980px980px980px1024px响应式网页呈现lviewportviewport常用属性常用属性15属性描述width设置窗口显示的最大宽度，为一个正整数，或字符串width-deviceheight设置窗口显示的最大高度，这个属性很少使用initial-scale设置页面的初始缩放值，为一个数字，可以带小数minimum-s
8、cale允许用户的最小缩放值，为一个数字，可以带小数maximum-scale允许用户的最大缩放值，为一个数字，可以带小数user-scalable是否允许用户进行缩放操作，值为no或yes（0或1），no代表不允许，yes代表允许响应式网页呈现l绝对大小绝对大小单位单位：pxpx（像素像素）l相对相对大小大小单位单位：%（百分比百分比）、emem、remrem等等。lemem:相对相对于于当前当前元素元素的的父元素父元素 rem:rem:相对于根元素相对于根元素html 16 响应式网页呈现l响应响应式图像式图像适适配配根据屏幕像素密度或屏幕宽度来匹配不同的根据屏幕像素密度或屏幕宽度来匹配不同的图像文件图像文件:2x,img/1_320.jpg 1x/根据屏幕的宽度根据屏幕的宽度来来匹配不同的图像文件匹配不同的图像文件:/使用类似媒体查询语句来设置图像的使用类似媒体查询语句来设置图像的大小大小/l响应响应式图像适配实例式图像适配实例17本章实训：创建一个响应式网页本章实训：创建一个响应式网页l试增加不同页面元素及媒体查询条件，观察页面变化试增加不同页面元素及媒体查询条件，观察页面变化18Thank you!Thank you!PPT模板下载：
