最近在做
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 rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">
可以通過 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的設備隱藏樣式表的。比如：
<link rel="stylesheet" type="text/css" href="example.css" media="only screen and (color)">
- 支持Media Queries的設備，正確應用樣式，就仿佛only不存在
- 不支持Media Queries但正確讀取Media Type的設備，由于先讀取到only而不是screen，將忽略這個樣式
- 不支持Media Queries的IE不論是否有only，都忽略樣式
完整的支持情況羅列
| 流浪器 | 是否支持 |
|---|---|
| IE6 | 不支持 |
| IE7 | 不支持 |
| IE8 | 不支持 |
| IE9 | 支持 |
| Chrome5 | 支持 |
| Opera10 | 支持 |
| Firefox3.6 | 支持 |
| Safari4 | 支持 |
自適應網頁設計
允許網頁寬度自動調整
首先，在網頁代碼的頭部，加入一行viewport元標簽。
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。
正常的web開發均可使用，這是常規的 meta 標簽，如果不使用該標簽寫出來的頁面效果，在手機屏幕上看會被縮小到默認像素，影響在手機上的使用。
所有主流瀏覽器都支持這個設置，包括IE9。對于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
不使用絕對寬度
由于網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。
具體說，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%;}
