好程式設計師 web 前端技術分享媒體查詢

什麼是媒體查詢

媒體查詢可以讓我們根據裝置顯示器的特性（如視口寬度、螢幕比例、裝置方向：橫向或縱向）為其設定 CSS樣式，媒體查詢由媒體型別和一個或多個檢測媒體特性的條件表示式組成。媒體查詢中可用於檢測的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的一些輸出裝置定製顯示效果。

1、媒體查詢操作方式

實際操作為：對裝置提出詢問（稱作表示式）開始，如果表示式結果為真，媒體查詢中的 CSS被應用，如果表示式結果為假，媒體查詢內的CSS將被忽略。

2、媒體查詢結構

@media all and (min-width:320px) {
body { background-color:blue;}
}

裝置型別（預設為 all）

screen 是媒體型別裡的一種，CSS2.1定義了10種媒體型別
and 被稱為關鍵字，其他關鍵字還包括 not(排除某種裝置)，only(限定某種裝置)
(min-width: 400px) 就是媒體特性，其被放置在一對圓括號中。

預設樣式注意：預設樣式要寫在最前面 /* 列印樣式 */ @media print {}

/* 手機等小螢幕手持裝置 * / @media screen and (min-width: 320px) and (max-width: 480px) {}

/* 平板之類的寬度 1024 以下裝置 * / @media only screen and (min-width: 321px) and (max-width: 1024px) {}

/* PC客戶端或大螢幕裝置: 1028px 至更大 */ @media only screen and (min-width: 1029px) {}

/* 豎屏 */ @media screen and (orientation:portrait) and (max-width: 720px) {對應樣式}

/* 橫屏 */ @media screen and (orientation:landscape){對應樣式}

3、CSS2 Media用法

其實並不是只有 CSS3才支援Media的用法，早在CSS2開始就已經支援Media，具體用法，就是在HTML頁面的heaad標籤中插入如下的一段程式碼
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
想知道現在的移動裝置是不是縱向放置的螢幕，可以這樣寫：
<link rel=“stylesheet” type=“text/css” media=“screen and (orientation:portrait)” href="style.css">
第一段的程式碼也用 CSS2來實現，讓它一樣可以讓頁面寬度小於960的執行指定的樣式檔案：
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

4、常涉及到的css屬性

display; width; float; text-align; font

好程式設計師web前端技術分享媒體查詢