第一章 响应式设计基础
1.弹性布局
<meta name = "viewport" content = "width = device-width">
注【1】
width和device-width
max-width: 50rem时 是视口最大为50rem 目标显示区域的宽度，例如，浏览器宽度
max-device-width：50rem 是设备最大宽度为50rem 设备整个显示区域的宽度
一般pc端用max-width 移动端用max-device-width
疑问【1】
既然device-width是设置成设备宽度 那为什么上述实例网站在缩小时，也出现了自适应？
2.弹性图片
max-width： 100%
max-width与width的区别
第二章 媒体查询
1.媒体查询
官方定义：媒体查询包含媒体类型和零或多个检验媒体特性的表达式。width，height，color都可以用于媒体查询的特性。使用媒体查询，可以不必修改内容本身，而让网页适配不同设备
利用媒体查询，可以根据设备的能力应用特定的CSS样式
(1)在不同的视口宽度下显示不同的布局
@media screen and (min-width: 50rem){
...css代码
}
注【2】
px em rem的区别
px 相对长度单位 是依据屏幕的分辨率而言的
em 相对长度单位 当前对象内文本字体的尺寸 任何浏览器未经修改的字体大小为16px 即1em 通常是指body的font-size为62.5% 这样10px就相当于1em em的缺点在于其会继承父级文字大小
rem 相对长度单位 root em 即只相对于html根元素做相对大小 集成了上述两种单位的优点 改变根元素字体大小 就能整体改变
(2)在link标签中使用媒体查询
媒体查询表达式询问设备的类型也可查询设备的特性，亦可以添加not
<link rel = "style sheet" type = "text/css" media = "screen" href = "xxx.css">
<link rel = "style sheet" type = "text/css" media = "screen and (orientation: portrait)" href = "xxx.css"> 屏幕是否是垂直方向
<link rel = "style sheet" type = "text/css" media = "not screen and (orientation: portrait) and ..." href = "xxx.css">
2.组合媒体查询
<link rel = "style sheet" type = "text/css" media = "screen ,(orientation：portrait) , projection" href = "xxx.css">
但凡一种任意一组媒体查询表达式为真 都执行该css 像projection这种后无特定的特性，表示适用于具备任何特性的该媒体类型
3.@import
可以在使用@import的时候有条件引入媒体查询
@import url("xxx.css") screen and (min-width: 50rem) 当后面的条件成立时 引入前面的css
值得注意的是 应用import时会增加HTTP请求（进而影响加载速度） 慎用
4.媒体查询的省略语法
可以不写screen and 因为不写的话默认应用于全部
5.媒体查询3中支持的特性
6.媒体查询4中废止的特性 如device-width device-height等
7.1媒体查询的常用场所1
任何CSS样式都可以应用在媒体查询中 所以一般应用时 把一般的样式先写好 然后再利用媒体查询添加特殊场景下的样式 比如在小视口下的展示 等
7.2媒体查询的常用场所2
针对高分辨率写特殊样式 如iphone4的视网膜屏
8.meta标签可设置的页面缩放
<meta name = "viewport" content = "initial-scale = 2.0(/0.5), width = device-width"> 把内容放大为实际内容的两倍（缩小为0.5倍）
设置最大最小缩放
<meta name = "viewport" content = "width = device-width, minimum-scale = 0.5,maximum-scale = 3.0">
禁止用户缩放
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no">
9.媒体查询5级草案
9.1可编程的媒体特性
@media (scripting: none){
没有js时的样式
}
@media (scripting: enabled){
有js时的样式
}
@media （scripting：initial-only）{
js只在一开始有效的样式
}
9.2交互媒体特性-指针特性
none coarse fine
@media (pointer: coarse){
针对coarse指针的样式 代表触摸屏设备中的手指 也可以是游戏机中的指针等不像鼠标一样敏感的设备
}
@media （pointer: fine）{
针对精准指针的样式
}
9.3悬停媒体特征
@media （hover： none）{
针对不可悬停用户的样式
}
@media （hover：on-demand）{
针对可通过启用程序实现悬停的用户样式
}
@media （hover）{
针对可悬停用户样式
}
还有any-pointer和any-hover特性 测试任意可能的输入设备
9.4环境媒体特性
@media （light-level：normal）{
针对标准亮度的样式
}
@media （light-level：dim）{
针对暗光线的样式
}
@media （light-level：washed）{
针对强光线的样式
}