CSS3 Media Queries在iPhone，iPad 等常用裝置的設定方法【轉載】

楊佰發表於2017-02-27
CSSS3iPhoneiPad

大家對於css3中media屬性並不陌生，但是隨著一些高視網膜的裝置面世，很多情況對於media的不標準的用法也越來越多，我通過查詢一些知識結合實踐給總結出一些標準的設定的方法。

CSS3 中的 Media Queries 可以讓我們設定不同型別的媒體條件，並根據對應的條件，給相應符合條件的媒體呼叫相對應的樣式表。現在最常見的一個例子，就是可以同時給 PC 的大螢幕和移動裝置設定不同的樣式表。這功能是非常強大的，它可以讓我們定製不同的解析度和裝置，並在不改變內容的情況下，製作的網頁在不同的解析度和裝置下都能顯示正常，並且不會因此而丟失樣式。

常用裝置的 CSS3 Media Queries

所有 iPad Media Queries

@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES */}

iPad 橫屏

@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES */}

iPad 豎屏

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES */ }

高清屏 iPad Media Queries（即 iPad 3 & 4 的 Media Queries）

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {/* STYLES */}

高清屏 iPad 橫屏

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES */}

高清屏 iPad 豎屏

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }

iPad 1 & 2 Media Queries

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES */}

iPad 1 & 2 橫屏

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES */}

iPad 1 & 2 豎屏

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES */}

iPad mini 也是和 iPad 1 和 2 一樣。

iPhone 5 Media Queries

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES */}

iPhone 5 橫屏

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { /* STYLES */}

iPhone 5 豎屏

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {/* STYLES */ }

iPhone 2G, 3G, 4, 4S Media Queries

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {/* STYLES */}

iPhone 2G-4S 橫屏

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { /* STYLES */}

原文連結

相關文章