CSS3 中的 Media Queries 对我们来说并不陌生，在网站需要自适应各种尺寸屏幕的时候我们会经常用到，根据不同的屏幕尺寸调用相对应的样式表。功能是非常强大的，它可以让我们定制不同的分辨率和设备，并在不改变内容的情况下，制作的网页在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。下面我们来看看常用移动设备的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 */}