通過不同的**型別和條件定義樣式表規則，**查詢讓css可以更精確作用於不同的**型別和同一**的不同條件。**查詢的大部分**特性都接受min和max用於表達」大於或等於」和」小與或等於」。如：width會有min-width和max-width**查詢可以被用在css中的@media和@import規則上，也可以被用在html和xml中。通過這個標籤屬性，我們可以很方便的在不同的裝置下實現豐富的介面，特別是移動裝置，將會運用更加的廣泛。
**查詢能夠獲取的值如下：
•裝置的寬和高device-width，device-heigth顯示螢幕/觸覺裝置。
•渲染視窗的寬和高width，heigth顯示螢幕/觸覺裝置。
•裝置的手持方向，橫向還是豎向orientation(portrait|lanscape)和印表機等。
•畫面比例aspect-ratio點陣印表機等。
•裝置比例device-aspect-ratio-點陣印表機等。
•物件顏色或顏色列表color，color-index顯示螢幕。
•裝置的解析度resolution。
在css3中的media queries模組中支援對外部樣式表的引用， 使用方法型別如下**：
@import url(color.css) screen and (min-width: 1000px);
或：/*使用link匯入外部css檔案*/
簡寫：上面使用中only可省略，限定於計算機顯示器，第乙個條件max-width是指渲染介面最大寬度，第二個條件max-device-width是指裝置最大寬度。
在樣式表中內嵌@media的**示例如下所示：
@media (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), (max-device-width:480px) and (orientation:landscape), (min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait)
簡寫：@media screen and (max-width:640px)
在上面的示例**中，設定了電腦顯示器解析度（寬度）大於或等於1024px（並且最大可見寬度為989px）；屏寬在480px及其以下手持裝置；屏寬在480px以及橫向（即480尺寸平行於地面）放置的手持裝置；屏寬大於或等於480px小於1024px以及垂直放置裝置的css樣式。從上面的例子可以看出，字元間以空格相連，選取條件包含在小括號內，樣式**為相容設定的樣式表，包含在中括號裡面。only（限定某種裝置，可省略），and（邏輯與），not（排除某種裝置）為邏輯關鍵字，多種裝置用逗號分隔，這一點繼承了css基本語法。
可用的裝置型別
在css中嵌入「@media」的方式， 開頭必須書寫「@media」,然後指定裝置型別（上例使用screen代表電腦顯示器）。css中定義了10種裝置型別
可以指定的值
設定型別
all所有裝置
braille
盲文，即盲人用點字法觸覺回饋裝置
embossed
盲文印表機
handheld
手持的便攜裝置
文件列印用紙或列印預覽檢視模式
projection
各種投影裝置
screen
彩色電腦顯示器螢幕
speech
語言和音訊合成器
tty固定字母間距的網格的**，比如電傳打字機和終端
tv電視機型別的裝置
web前端 響應式布局
隨著移動裝置的流行，網頁設計必須要考慮到移動端的設計。同乙個 為了相容pc端和移動端顯示，就需要進行響應式開發。利用 查詢，讓同乙個 相容不同的終端 pc端 移動端 呈現不同的頁面布局。css3 media查詢 用於查詢裝置是否符合某一特定條件，這些特定條件包括螢幕尺寸 是否可觸控 螢幕精度 橫屏豎...
響應式Web設計 布局
去年上半年，我開始著手推動專案中響應式設計的落 地。以官網優化需求為契機，主動去做了響應式的頁面設計，也說服了產品 設計和開發的www.cppcns.com相關同事一起把它上線落實，但不幸的是，由於各種方面的原因，比如，生搬硬套的pc模組，無差異化的設計使得移動端閱讀不佳，導航相容性有限等等原因，上...
web雜談之響應式布局
什麼叫做響應式布局？也即是響應式web設計。響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗...