标签：
关于加载查询的最佳方法，解决IE7，IE8的问题 Respond.js
宁浩网
480px 767px, 1024px, 1280px, 910px
章节1:课程介绍与基本概念
课时1课程介绍01:39
课时2响应式设计的真实例子02:33
课时3viewport - 可视窗口01:33
可视区域=窗口大小，页面大小，不一样的。
缩放的级别，
<meta name="viewport" content="width=device-width, initial-scale=1.0">
initial-scale 缩放级别
device-width, 输出设备的屏幕可见宽度
Width 默认 980px;
content="width=320
课时4手工配置 viewport04:25
课时5像素密度02:49
Resolution 一般用 dpi 表示
Iphone 3g 162dpi 320px*480px
Retina 视网膜屏
Css pixel 相对值；
像素密度，会自动放大倍数，iphone4 会比3放大一部；
章节2:媒体查询
课时6应用媒体查询的方法01:53
<link rel="stylesheet" href="css/css.css" media="print">
<link rel="stylesheet" href="css/css.css" media="(max-width:480px)">
<link rel="stylesheet" href="css/css.css" media="screem and (max-width:480px)">
课时7media type 媒体类型04:01
Screen print project
默认 CSS 的 media 是 all 所有终端；
课时8meida feature 媒体特性03:45
分辨率，主度，宽度，宽高的比例，可视窗口的尺寸，设备的使用方向（垂直，横向）
判断是否垂直
@media ( orientation:portrait) {} // 垂直方向
@media (max-width: 767px;)
@media (max-device-width: 767px) {} // 设备的宽度
课时9aspect-ratio 可视窗口宽与高的比例03:01
aspect-ratio
@media( aspect-ratio: 3/2 ){
body{
background: #0381bb;
}
}
注意：可视窗口（页面body区域）宽与高 与 设备的 宽高比还是不一样的。
只有把工具栏，地址栏，全隐藏了，才能相同。
课时10device-aspect-ratio 设备的宽与高的比例03:34
device-aspect-ratio 也支持前缀 min ,max
@media( device-aspect-ratio: 2/3 ){
body{
background: #0381bb;
}
}
注意，设备宽高比，不受设备使用方向的影响，是个固定值，比如4S，是 2/3 固定比，而不是 3/2
课时11orientation 设备的使用方向02:04
@media ( orientation: landscape ){ // 水平方向
body{
background: #27ae60;
}
}
@media ( orientation: portrait ){ // 垂直方向
body{
background: #f2cb2b;
}
}
课时12width（可视窗口宽度） 与 device-width（设备宽度）03:45
@media ( max-height: 480px ){
body{
background: #f3581a;
}
}
@media ( max-device-height: 480px ){ 受设备使用方向影响 ？
body{
background: #f3581a;
}
}
课时13resolution 像素密度05:09
@media screen and ( resolution: 1dppx ), screen and ( -webkit-device-pixel-ratio: 1 ) {
body{
background: #c0392b;
}
}
Dpi
dppx 值是像素的放大倍数；
Resolution -webkit 不认识，不支持
device-pixel-ratio 设备像素比例，放大倍数，一般的屏幕是1 视网膜的是 2
课时14操作符 - and04:33
@media screen and ( min-width: 480px ) and ( max-width: 767px ){
body{
background: #27ae60;
}
}
等于PHP里的，&& 要同时为真。
课时15逗号分隔连接多个媒体查询02:14
@media screen and ( orientation: landscape ), screen and ( min-width: 700px ){
body{
background: #c0392b;
}
}
逗号为或，一个为真即可
课时16操作符 - not03:04
@media not screen and ( max-width:959px ){
body{
background: #ccc;
}
}
not screen and ( max-width:959px ) = not ( screen and ( max-width:959px ) )
否定整个媒体查询
Not 只会影响到逗号分开的部分，不会否定全部。
使用NOT必须明确指定媒体类型。否则永远返回假。
ONLY 操作符，同样必须指定媒体类型。
章节3:响应式布局
Breakpoint 断点
课时17响应式布局 #103:56
@media ( max-width: 959px){
.container{
width: 100%;
}
#mainbody{
width: 67%;
}
#sidebar{
width: 30%;
float: right;
}
}
@media ( max-width: 767px ){
#mainbody, #sidebar{
float: none;
width: 100%;
}
}
课时18响应式布局 #202:05
目标伪类
<a href="#nav" class="open toggle-btn"><i class="icon-reorder"></i></a>
<nav id="nav">
/* 导航为目标状态的时候显示关闭按钮 */
#nav:target .close{
display: inline-block;
}
/* 初始隐藏导航 */
#nav{
display: none;
}
/* 导航为目标状态时的样式 */
#nav:target{
display: block;
position: absolute;
top: 0;
padding-top: 70px;
width: 100%;
}
/* 目标状态下的导航的 ul 标签 */
#nav:target ul{
background: #000;
}
/* 目标状态下的导航的 li 与 a */
#nav:target li, #nav:target li a{
display: block;
color: #eee;
text-align: left;
}
/* 目标状态下的导航的列表下的 a 标签的悬停样式 */
#nav:target li a:hover{
background: #3b3b3b;
}
/* 目标状态下导航的激活状态的样式 */
#nav:target .active{
background: #272727;
}
课时19响应式布局 #302:07
章节4:响应式导航
课时20响应式导航01:52
课时21导航菜单的 HTML04:07
课时22导航菜单的 CSS02:46
课时23切换按钮的样式03:08
课时24响应式导航菜单的样式04:06
章节5:响应式的图像
课时25响应式的图像04:07
img{
width: 100%;
max-width: 100%;
}
#showcase{
background-image: url(../../images/01.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
-webkit-background-size: 100%;
background-size: cover;
margin-bottom: 20px;
padding-top: 56%;
}
课时26响应式的背景图像01:43
宽度 100%，高度除宽度就是高度的百分比，
课时27不同尺寸的设备使用不同的图像00:49
课时28不同尺寸的设备使用不同的背景图像03:06
@media ( max-width: 480px ){
#showcase{
background-image: url(../../images/01_s.jpg);
}
}
@media ( max-width: 480px ) and ( min-resolution: 2dppx ), ( max-width: 480px ) and ( -webkit-min-device-pixel-ratio: 2 ){
#showcase{
background-image: url( ../../images/01_s_2x.jpg);
}
}
课时29根据屏幕密度切换不同的背景图像03:14
课时30picturefill04:40
章节6:响应式幻灯片
课时31响应式幻灯片03:51
课时32幻灯片的控制按钮02:09
课时33幻灯片的控制按钮样式03:06
课时34修复幻灯片被覆盖的问题01:27
章节7:结束
课时35结束语
开课吧：
第一讲 预备知识，响应式交互设计的基础
导学
Responsive Web Design_开篇
响应式WEB设计三要素：
流体窗格布局，媒体查询，自适应媒体内容
什么是响应式Web设计
为什么需要响应式交互设计
响应式web先决条件
知识点拓展
谈谈自己对响应式的理解
制作响应式页面的条件
第一讲测验
响应式网站和非响应式网站的区别
第二讲 响应式布局
导学
流式布局中的定位与布局
流式布局中的字体与尺寸
网格布局和混合布局
混合布局和流式布局
知识点拓展
分栏布局的类型
流式布局中的字体
第二讲测验
修改代码
第三讲 响应式媒体
导学
Viewports标签和移动设备
获取屏幕信息
导航和组件
响应式媒体
制作响应式图片和多媒体技巧
制作响应式背景图片
定宽视频和广告的响应式
高分辨率下的图片响应式
知识点拓展
媒体查询
响应式设计是如何获得信息的，谈一下自己对媒体查询的理解
第三讲测验
编写代码
标签：
原文地址：http://www.cnblogs.com/zztinglan/p/4277627.html
