CSS之media query模板
生活随笔
收集整理的這篇文章主要介紹了
CSS之media query模板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在Responsiv的設計中，CSS3的Media是起著非常關鍵性的作用，也可以說沒有CSS3 Media這個屬性，Responsiv設計是玩不起來，也是玩不轉的。大家都知道Responsiv是為各種不同的設備進行樣式設計的，但有一個問題大家或許還處在模糊狀態，這個CSS3 Media要如何設置各自的臨界點？
那么今天我們就針對上面的問題，一起來探討一下CSS3 Media Queries在各種不同設備（桌面，手機，筆記本，ios等）下的模板制作。那么Media Queries是如何工作的？那么有關于他的工作原理大家要是感興趣的話可以參考《CSS3 Media Queries》一文，里面已經做過詳細的介紹，這里就不在進行過多的闡述
1.CSS3 Media Queries模板
CSS3 Media Queries一般都是使用“max-width”和“min-width”兩個屬性來檢查各種設備的分辨大小與樣式表所設條件是否滿足，如果滿足就調用相應的樣式。打個比方來說，如果你的Web頁面在960px的顯屏下顯示，那么首先會通過CSS3 Media Queries進行查詢，看看有沒有設置這個條件樣式，如果找到相應的，就會采用對應下的樣式，其他的設備是一樣的道理。下面具體看看“max-width”和“min-width”模板
1.1 使用max-width
1.2 使用min-width
1.3 max-width和min-width的混合使用
同時CSS3 Media Queries還能查詢設備的寬度“device-width”來判斷樣式的調用，這個主要用在iPhone,iPads設備上，比如像下面的應用
1.4 iPhone和Smartphones上的運用
max-device-width指的是設備整個渲染區寬度（設備的實際寬度）
1.5 iPads上的運用
針對移動設備的運用，如果你想讓樣式工作得比較正常，需要在<head>添加“viewport”的meta標簽
2.CSS3 Media Queries在標準設備上的運用
下面我們一起來看看CSS3 Meida Queries在標準設備上的運用，大家可以把這些樣式加到你的樣式文件中，或者單獨創建一個名為“responsive.css”文件，并在相應的條件中寫上你的樣式，讓他適合你的設計需求
2.1 1024px顯屏
2.2 640px顯屏
2.3 iPad橫板顯屏
2.4 iPad豎板顯屏
總結
以上是生活随笔為你收集整理的CSS之media query模板的全部內容，希望文章能夠幫你解決所遇到的問題。
