大家對於css3中media屬性並不陌生，但是隨著一些高視網膜的裝置面世，很多情況對於media的不標準的用法也越來越多，我通過查詢一些知識結合實踐給總結出一些標準的設定的方法。css3 中的 media queries 可以讓我們設定不同型別的**條件，並根據對應的條件，給相應符合條件的**呼叫相對應的樣式表。現在最常見的乙個例子，就是可以同時給 pc 的大螢幕和移動裝置設定不同的樣式表。這功能是非常強大的，它可以讓我們定製不同的解析度和裝置，並在不改變內容的情況下，製作的網頁在不同的解析度和裝置下都能顯示正常，並且不會因此而丟失樣式。
所有 ipad media queries
@mediaonly screenipad 橫屏and(min-device-width :768px)and(max-device-width :1024px)
@mediaonly screenipad 豎屏and(min-device-width :768px)and(max-device-width :1024px)and(orientation :landscape)
@mediaonly screen高清屏 ipad media queriesand(min-device-width :768px)and(max-device-width :1024px)and(orientation :portrait)
即 ipad 3 & 4 的 media queries：
@mediaonly screen高清屏 ipad 橫屏and(min-device-width :768px)and(max-device-width :1024px)and(-webkit-min-device-pixel-ratio:2)
@mediaonly screen高清屏 ipad 豎屏and(min-device-width :768px)and(max-device-width :1024px)and(orientation :landscape)and(-webkit-min-device-pixel-ratio:2)
@mediaonly screenipad 1 & 2 media queriesand(min-device-width :768px)and(max-device-width :1024px)and(orientation :portrait)and(-webkit-min-device-pixel-ratio:2)
@mediaonly screenipad 1 & 2 橫屏and(min-device-width :768px)and(max-device-width :1024px)and(-webkit-min-device-pixel-ratio:1)
@mediaonly screenipad 1 & 2 豎屏and(min-device-width :768px)and(max-device-width :1024px)and(orientation :landscape)and(-webkit-min-device-pixel-ratio:1)
@mediaonly screenipad mini 也是和 ipad 1 和 2 一樣。iphone 5 media queriesand(min-device-width :768px)and(max-device-width :1024px)and(orientation :portrait)and(-webkit-min-device-pixel-ratio:1)
@mediaonly screeniphone 5 橫屏and(min-device-width :320px)and(max-device-width :568px)
@mediaonly screeniphone 5 豎屏and(min-device-width :320px)and(max-device-width :568px)and(orientation :landscape)
@mediaonly screeniphone 2g, 3g, 4, 4s media queriesand(min-device-width :320px)and(max-device-width :568px)and(orientation :portrait)
@mediaonly screeniphone 2g-4s 橫屏and(min-device-width :320px)and(max-device-width :480px)
@mediaonly screen手機現在比較多。所以又有新的問題。就是有些部分要精確處理的。從手機開始還要分愛瘋6.愛瘋5等大小，谷哥瀏覽器有乙個模擬器。可以測試用。and(min-device-width :320px)and(max-device-width :480px)and(orientation :landscape)
media響應式布局模版
列印樣式 media print 手機等小螢幕手持裝置 media screen and min width 320px and max width 480px 平板之類的寬度 1024 以下裝置 media only screen and min width 321px and max width...
響應式布局 media詳解
語法 media 型別及功能 指定 查詢使用的 特性。這類似於css屬性，如 max width 960px。css3 說明 指定樣式表規則用於指定的 型別和查詢條件。ie8及以下只能實現css2中的部分，即只可以設定 型別。查詢可以被用在css中的 media和 import規則上，也可以被用在h...
響應式頁面 media介紹
使用 media 查詢，你可以針對不同的螢幕大小定義不同的樣式。media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面，這對除錯來說是乙個極大的便利。media medi...