媒體查詢
最近在研究響應式web頁面設計，入門級media queries ，即媒體查詢，媒體查詢在css3中引入，作用是允許設定表達式檢查媒體環境，用來確定應用不同的樣式。
媒體查詢應用的兩種方式
一.在引入樣式表的時候判斷媒體尺寸，根據尺寸引入不同的樣式表，如下
<link rel="stylesheet" type="text/css" href="A.css" media="screen and (max-width: 620px)">表示當媒體分表率小於620像素時，應用A樣式表（像素只是媒體查詢的其中一種類型）
and 爲關鍵字
<link rel="stylesheet" type="text/css" href="B.css" media="screen and (min-width: 621px) and (max-width: 980px)">上面這個link表示 當媒體像素在621像素到980像素之間時，應用B樣式表
二.就是直接在樣式表中寫媒體查詢的樣式
@media screen and (max-width: 620px) { /*當屏幕尺寸小於620px時，應用下面的CSS樣式*/
.class {
background: red;
}
}媒體查詢就是用來查詢媒體環境，在web中就是對像素條件的查詢，用以控制在不同分辨率的設備上顯示不同的樣式。
字體
響應式中的字體，px像素是固定大小。但是在響應式設計中，對於不同分辨率的設備，固定大小的字體不能滿足各種設備的顯示需求，於是em用起來就會比較方便了。
em字體單位是以比例的方式顯示。
通常情況下 1em爲16px的字體。em的比例相對於父級元素（確定了字體大小的父級元素）來說的。
比如 設定body 字體爲20px 其中的1個div字體大小爲1.5em 那麼這個div的字體實際大小就是30px。
有了這個設定，那麼 對於不同的設備，我們只需要在媒體查詢時，在不同像素的設備上改變body元素的字體大小，那在不同的設備上字體的大小也就相應的等比例變化了。
附上 研究過程中寫完的代碼，如下：style.css樣式表
body {
margin: 0;
padding: 0;
font-size: 14px;
}
.head {
padding: 10px;
max-width: 1000px;
margin: 0 auto;
background-color: blue;
color: white;
font-size: 1.14em;
}
.left {
background-color: red;
float: left;
width: 40%;
}
.right {
margin-bottom: 10px;
background-color: yellow;
float: right;
width: 50%;
}
.bot {
margin: 0 auto;
background-color: gray;
clear: both;
width: 50%;
}
@media screen and (max-width :600px) {
.bot {
display: none;
}
}
media.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style/style.css" rel="stylesheet" />
</head>
<body>
<div class="head">
<div class="left">
5月18日，國家主席習近平在上海會見柬埔寨首相洪森。 新華社記者 蘭紅光 攝
習近平表示，中
</div>
<div class="right">
5月18日，國家主席習近平在上海會見柬埔寨首相洪森。 新華社記者 蘭紅光 攝
習近平表示，中柬友誼源遠流長，歷經風雨考驗而不動搖，彌足珍貴。無論國際形勢如何變化，我們一定要堅定不移推動中柬全面戰略合作伙伴關係發展，把中柬友好事業堅定不移推進下去，讓兩國和兩國人民世世代
代友好下去。
</div>
<div class="bot">
5月18日，國家主席習近平在上海會見柬埔寨首相洪森。 新華社記者 蘭紅光 攝
習近平表示，中柬友誼源遠流長，歷經風雨考驗而不動搖，彌足珍貴。無論國際形勢如何變化，我們一定要堅定不移推動中柬全面戰略合作伙伴關係發展，把中柬友好事業堅定不移推進下去，讓兩國和兩國人民世世代
代友好下去。
</div>
</div>
</body>
</html>