响应式网页开发基础ch1.pptVIP

第1章 响应式网页设计基础 * 响应式网页设计基础 什么是响应式网页 示例：Ethan Marcotte个人的响应式网页 / 手动拖动鼠标改变浏览器窗口的大小，在不同浏览器窗口尺寸下，页面显示是否有变化？ 自动适应、流式网格布局、流式图像显示 * 什么是响应式网页 “自适应网页”就是 响应式网页 ?? 不同浏览终端打开的并非同一个地址、同一个网页，这种不是真正的响应式 * 什么是响应式网页 响应式网页的核心思想：“一次设计，普遍适用” 不管使用什么设备，打开及显示的都是同一个地址、同一个网页，布局及显示适应不同的浏览环境 什么是响应式网页 响应式网页的特点 媒体查询及应用 媒体查询（Media Query）是CSS 3 中获取用户行为和设备环境（比如屏幕宽度、屏幕分辨率、设备方向等）并适配相应的CSS 规则的过程，可以让CSS 能更精确地作用于不同的媒体类型和同一媒体的不同条件，也可以为一些特定的输出设备定制特定的显示效果，从而为不同终端的用户都能提供较好的浏览体验。 关键字：@media 媒体查询对浏览器的支持 * 媒体查询及应用 CSS 3 媒体查询定义语句的基本格式： style @media (适用条件1) and/or (适用条件2)… {适用的CSS 样式} /style * 媒体查询及应用 例1-1 @media screen and (max-width: 300px)?{ body?{ ????????background-color:lightblue; ??? } } 例1-2 @media screen and (min-width:960px) and (max-width:1200px){ body{ background:yellow; } } * 媒体查询及应用 媒体查询支持的媒体类型 对所有媒体类型都适用：@ media all …… 指定适用于多种设备：@media screen and speech … 只适用于某种设备：@media only screen… * 值 描述 all 用于所有设备 print 用于打印机和打印预览 screen 用于彩色屏幕，平板电脑，智能手机等。 speech 应用于屏幕阅读器等发声设备 媒体查询及应用 常用媒体特性 * 属性 描述 device-?height， 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（每英寸点数），300dpi，118dpcm（每厘米点数）等 媒体查询及应用 例1-3 @media only screen and (max-width: 500px) { body { background-color: lightblue; } } 例1-4 @media screen and (min-width:900px){ .wrapper{width: 980px;} } 例1-5 @media only screen and (orientation: portrait) { body { background-color: lightblue; } } 例1-6 @media screen and (max-width:720px) and (min-width:320px){ body{ background-color:red;} } * 媒体查询及应用 动手练习 试增加媒体查询条件及属性，观察网页变化 headstyle type=text/css #test{ background: silver; width: 400px; height: 200px; margin: auto; } @media screen and (min-width:600px){ #test{background:#EBEA89;}} /style /head body div id=test /div/body * 响应式网页呈现 meta