最近在做 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 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，都忽略樣式

完整的支持情況羅列

自適應網頁設計

允許網頁寬度自動調整

首先，在網頁代碼的頭部，加入一行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%;}

參考文章

• CSS3 Media Queries 詳解
• CSS3 Media Queries的些野史外傳
• 自適應網頁設計（Responsive Web Design）