常用设备的 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 */}