CSS3 Media Queries在标准设备上的运用

CSS3 Media Queries在标准设备上的运用

1、1024px显屏

@media screen and (max-width : 1024px) { /* CSS Styles */ }

2、800px显屏

@media screen and (max-width : 800px) { /* CSS Styles */ }

3、640px显屏

@media screen and (max-width : 640px) { /* CSS Styles */ }

4、iPad横板显屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) { /* CSS Styles */ }

5、iPad竖板显屏

@media screen and (max-device-width: 768px) and (orientation: portrait) { /* CSS Styles */ }

iPhone 和 Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px)

更新CSS3 Media Queries模板查询

1、Smartphones (portrait and landscape)

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

2、Smartphones (landscape)

@media only screen and (min-width : 321px) {     /* Styles */ }

3、Smartphones (portrait)

@media only screen and (max-width : 320px) {     /* Styles */ }

4、iPads (portrait and landscape)

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

5、iPads (landscape)

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

6、iPads (portrait)

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

7、iPhone 4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {     /* Styles */ }

8、640px显屏

@media screen and (max-width : 640px) {     /* CSS Styles */ }

9、800px显屏

@media screen and (max-width : 800px) {     /* CSS Styles */ }

10、1024显屏

@media screen and (max-width : 1024px) {     /* CSS Styles */ }

11、Desktops and laptops

@media only screen and (min-width : 1224px) {     /* Styles */ }

12、Large screens

@media only screen and (min-width : 1824px) {     /* Styles */ }