响应式网页开发基础教程(jQuery+Bootstrap)第1章 响应式网页设计基础
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
max- device- height， 定义输出设备的屏幕最大可见高度及宽度
max- device- width min- device- height， 定义输出设备的屏幕最小可见高度及宽度
min- device- width orientation
resolution
定义输出设备中的屏幕方向。取值可以是portrait （纵向）或landscape（横向） 定义设备的分辨率。如：96dpi（每英寸点数）， 300dpi，118dpcm（每厘米点数）等
属性
描述
width
设置窗口显示的最大宽度，为一个正整数，或字符串
"width- device"
height
设置窗口显示的最大高度，这个属性很少使用
initial- scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum- 允许用户的最小缩放值，为一个数字，可以带小数
scale
maximum- 允许用户的最大缩放值，为一个数字，可以带小数
第1章 响应式网页设计基础
1
响应式网页设计基础
什么是响应式网页 媒体查询 响应式网页呈现
本章实训
什么是响应式网页
示例：Ethan Marcotte个人的响应式网页 https:/// 手动拖动鼠标改变浏览器窗口的大小，在不同浏览器窗口
尺寸下，页面显示是否有变化？ 自动适应、流式网格布局、流式图像显示
scale
user-
是否允许用户进行缩放操作，值为"no"或"yes"（0或1），
scalable no代表不允许，yes代表允许
关键字：@media 媒体查询对浏览器的支持
7
媒体查询及应用
CSS 3 媒体查询定义语句的基本格式： <style> @media (适用条件1) and/or (适用条件2)… {适用的CSS 样式} </style>
8
媒体查询及应用
例1-1
@media screen and (max-width: 300px) { body {
body { background-color: lightblue; } } 例1-6 @media screen and (max-width:720px) and (min-width:320px){
body{ background-color:red;} }
12
媒体查询及应用
动手练习 试增加媒体查询条件及属性，观察网页变化
13
响应式网页呈现
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, userscalable=0">
作用：让当前屏幕可视区域的宽度等于设备的宽度，同时
不允许用户手动缩放。
background-color:lightblue; } }
例1-2
@media screen and (min-width:960px) and (max-width:1200px){ body{ background:yellow; } }
9
媒体查询及应用
媒体查询支持的媒体类型
值 all print screen speech
<head><style 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>
11
媒体查询及应用
例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) {
常见设备的默认viewport
设备类型
默认 viewport
iPhone 980px
iPad
Android Samsung
980px
980px
Androi d HTC
980px
Chrome 980px
Opera Presto
980px
IE 1024px
14
响应式网页呈现
viewport常用属性
描述 用于所有设备 用于打印机和打印预览 用于彩色屏幕，平板电脑，智能手机等。 应用于屏幕阅读器等发声设备
✓ 对所有媒体类型都适用：@ media all …… ✓ 指定适用于多种设备：@media screen and speech … ✓ 只适用于某种设备：@media only screen…
3
什么是响应式网页
“自适应网页”就是 响应式网页 ??
不同浏ቤተ መጻሕፍቲ ባይዱ终端打开的并非同一个地址、同一个网页，这种不 是真正的响应式
4
什么是响应式网页
响应式网页的核心思想：“一次设计，普遍适用” 不管使用什么设备，打开及显示的都是同一个地址、同一
个网页，布局及显示适应不同的浏览环境
什么是响应式网页
10
媒体查询及应用
常用媒体特性
属性 device- height，
描述 定义输出设备的屏幕可见高度及宽度
device- width max- height，max- width 定义输出设备中的页面最大可见区域高度及宽度 min- width，min- height 定义输出设备中的页面最小可见区域高度及宽度
响应式网页的特点
媒体查询及应用
媒体查询（Media Query）是CSS 3 中获取用户行为和设备环境（比如 屏幕宽度、屏幕分辨率、设备方向等）并适配相应的CSS 规则的过程， 可以让CSS 能更精确地作用于不同的媒体类型和同一媒体的不同条件， 也可以为一些特定的输出设备定制特定的显示效果，从而为不同终端 的用户都能提供较好的浏览体验。
max- device- width min- device- height， 定义输出设备的屏幕最小可见高度及宽度
min- device- width orientation
resolution
定义输出设备中的屏幕方向。取值可以是portrait （纵向）或landscape（横向） 定义设备的分辨率。如：96dpi（每英寸点数）， 300dpi，118dpcm（每厘米点数）等
属性
描述
width
设置窗口显示的最大宽度，为一个正整数，或字符串
"width- device"
height
设置窗口显示的最大高度，这个属性很少使用
initial- scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum- 允许用户的最小缩放值，为一个数字，可以带小数
scale
maximum- 允许用户的最大缩放值，为一个数字，可以带小数
第1章 响应式网页设计基础
1
响应式网页设计基础
什么是响应式网页 媒体查询 响应式网页呈现
本章实训
什么是响应式网页
示例：Ethan Marcotte个人的响应式网页 https:/// 手动拖动鼠标改变浏览器窗口的大小，在不同浏览器窗口
尺寸下，页面显示是否有变化？ 自动适应、流式网格布局、流式图像显示
scale
user-
是否允许用户进行缩放操作，值为"no"或"yes"（0或1），
scalable no代表不允许，yes代表允许
关键字：@media 媒体查询对浏览器的支持
7
媒体查询及应用
CSS 3 媒体查询定义语句的基本格式： <style> @media (适用条件1) and/or (适用条件2)… {适用的CSS 样式} </style>
8
媒体查询及应用
例1-1
@media screen and (max-width: 300px) { body {
body { background-color: lightblue; } } 例1-6 @media screen and (max-width:720px) and (min-width:320px){
body{ background-color:red;} }
12
媒体查询及应用
动手练习 试增加媒体查询条件及属性，观察网页变化
13
响应式网页呈现
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, userscalable=0">
作用：让当前屏幕可视区域的宽度等于设备的宽度，同时
不允许用户手动缩放。
background-color:lightblue; } }
例1-2
@media screen and (min-width:960px) and (max-width:1200px){ body{ background:yellow; } }
9
媒体查询及应用
媒体查询支持的媒体类型
值 all print screen speech
<head><style 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>
11
媒体查询及应用
例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) {
常见设备的默认viewport
设备类型
默认 viewport
iPhone 980px
iPad
Android Samsung
980px
980px
Androi d HTC
980px
Chrome 980px
Opera Presto
980px
IE 1024px
14
响应式网页呈现
viewport常用属性
描述 用于所有设备 用于打印机和打印预览 用于彩色屏幕，平板电脑，智能手机等。 应用于屏幕阅读器等发声设备
✓ 对所有媒体类型都适用：@ media all …… ✓ 指定适用于多种设备：@media screen and speech … ✓ 只适用于某种设备：@media only screen…
3
什么是响应式网页
“自适应网页”就是 响应式网页 ??
不同浏ቤተ መጻሕፍቲ ባይዱ终端打开的并非同一个地址、同一个网页，这种不 是真正的响应式
4
什么是响应式网页
响应式网页的核心思想：“一次设计，普遍适用” 不管使用什么设备，打开及显示的都是同一个地址、同一
个网页，布局及显示适应不同的浏览环境
什么是响应式网页
10
媒体查询及应用
常用媒体特性
属性 device- height，
描述 定义输出设备的屏幕可见高度及宽度
device- width max- height，max- width 定义输出设备中的页面最大可见区域高度及宽度 min- width，min- height 定义输出设备中的页面最小可见区域高度及宽度
响应式网页的特点
媒体查询及应用
媒体查询（Media Query）是CSS 3 中获取用户行为和设备环境（比如 屏幕宽度、屏幕分辨率、设备方向等）并适配相应的CSS 规则的过程， 可以让CSS 能更精确地作用于不同的媒体类型和同一媒体的不同条件， 也可以为一些特定的输出设备定制特定的显示效果，从而为不同终端 的用户都能提供较好的浏览体验。