最近在做
react移动端开发，重新开始接触到叫高级的Css使用，为了加深自己的记忆，整理一些学习笔记，供日后查阅。
Media Queries
Media这个东西让看到它吓了我一跳，真真的了不起，它让我可以给不同大小的浏览器定制不同的效果，以及针对不同设备设定不同布局。
今天在做移动端css效果时，发现一个问题，在做一个个性化Tab标签时，发现在iphone5，iphone6，ipad上，我需要让他展示不同的效果，用js可以实现这样的效果，但是感觉css和js耦合起来的编程方式让我很不舒服。
于是我想到了使用 Media 来达到我想要的效果，使用它的时候感觉很奇妙，真的很有趣。
使用
- screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型
- and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
- (min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看 相关的Media features部分
可以通过 link 标签的 media 属性，来根据不用的像素加载需要的css，但是在项目前期高频修改的前提下，使用这样的方式，增加了维护的成本（个人原因，喜欢把东西细化，但是在不断分化、细化后发现，在需求不太确定的项目前期做这样的事情，增的是在作死...）
min-width和max-width的含义
max-width表示最大宽度，也就是说在不超过该宽度下的情况下执行。所以@media only screen and (max-width: 1024px) {}表示的含义是：当浏览器的宽度小于1024像素的时候，花括号里面的CSS样式其作用
@media only screen and (max-width: 1024px) {
body { background-color: blue;}
}
详细介绍
@media only screen and (min-width: 320px)
-
not:not是用来排除掉某些特定的设备的，比如@media not print（非打印设备） -
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。 -
all: 所有设备，这个应该经常看到
| media_type | 设备类型说明 |
|---|---|
| all | 所有设备 |
| aural | 听觉设备 |
| braille | 点字触觉设备 |
| handled | 便携设备，如手机、平板电脑 |
| 打印预览图等 | |
| projection | 投影设备 |
| screen | 显示器、笔记本、移动端等设备 |
| tty | 如打字机或终端等设备 |
| tv | 电视机等设备类型 |
| embossed | 盲文打印机 |
浏览器支持
并非所有的浏览器都支持Media Queries
Media Queries是CSS3对于Media Type的一个扩展，所以不支持Media Queries的浏览器，应该仍然要识别Media Type，但是IE只是简单的忽略了样式。only 关键字可能显得有些多余，对支持Media Queries的浏览器来说确实是这样，因为加不加 only 没有影响。only的作用，很多时候是用来对那些不支持Media Queries但是却读取Media Type的设备隐藏样式表的。比如：
- 支持Media Queries的设备，正确应用样式，就仿佛only不存在
- 不支持Media Queries但正确读取Media Type的设备，由于先读取到only而不是screen，将忽略这个样式
- 不支持Media Queries的IE不论是否有only，都忽略样式
完整的支持情况罗列
| 流浪器 | 是否支持 |
|---|---|
| IE6 | 不支持 |
| IE7 | 不支持 |
| IE8 | 不支持 |
| IE9 | 支持 |
| Chrome5 | 支持 |
| Opera10 | 支持 |
| Firefox3.6 | 支持 |
| Safari4 | 支持 |
自适应网页设计
允许网页宽度自动调整
首先，在网页代码的头部，加入一行viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
正常的web开发均可使用，这是常规的 meta 标签，如果不使用该标签写出来的页面效果，在手机屏幕上看会被缩小到默认像素，影响在手机上的使用。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。
具体说，CSS代码不能指定像素宽度：
width:xxx px;
只能指定百分比宽度：
width: xx%;
或者
width:auto;
相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
流动布局（fluid grid）
"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
图片的自适应
img { max-width: 100%;}
参考文章
- CSS3 Media Queries 详解
- CSS3 Media Queries的些野史外传
- 自适应网页设计（Responsive Web Design）