Media Queries

响应式设计中最关键的一部分就是 Media Queries。整理下常用的 Media Queries,后期将持续维护。

首先,先列下最常见的几款设备参数:

设备 分辨率 像素比 (CSS pixel ratio) 宽高比 (Aspect ratio)
iPhone 3 480×320 1 3:2
iPhone 4 & 4S 960×640 2 3:2
iPhone 5 1136×640 2 71:40
iPad mini 1024x768 1 4:3
iPad 1 & 2 & 3 1024×768 1 4:3
iPad 4 2048×1536 2 4:3
Samsung Galaxy S I & II 800x480 1.5 3.5
Samsung Galaxy S III 1280x720 2 16:9

详细信息可以访问维基百科,维基百科上 iPad 3 和 iPad 4 参数相同,个人感觉有误。

此外,Android 设备过多,本人也了解较少,以下按 dpi 为维度进行区分:

DPI 分辨率 像素比 (CSS pixel ratio)
xhdpi 960x640 2
hdpi 800x480 1.5
mdpi 480x320 1
ldpi 320x240 0.75

大概的占比可参考移动终端开发必备知识

回归正题,根据上面的参数可以设置断点,列出常用的 Media Queries:

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

}

/* device pixel ratio 可以根据不同的像素比加载不同质量的图片 */
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {

}

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

}

@media only screen and (-webkit-min-device-pixel-ratio : 1),
only screen and (min-device-pixel-ratio: 1) {

}


/* iPads */
@media only screen and (device-width: 768px){

}
/* iPads (landscape) */
@media only screen
and (device-width: 768px)
and (orientation: landscape) {

}
/* iPads (portrait) */
@media only screen
and (device-width: 768px)
and (orientation: portrait) {

}

/* iPhone 4 */
@media only screen 
and (device-width: 320px) 
and (-webkit-device-pixel-ratio: 2){

}

/* iPhone 4 (Landscape) */
@media only screen 
and (device-width: 320px) 
and (-webkit-device-pixel-ratio: 2)
and (orientation : Landscape) {

}

/* iPhone 4 (Portrait) */
@media only screen 
and (device-width: 320px) 
and (-webkit-device-pixel-ratio: 2)
and (orientation : portrait) {

}

/* iPhone 5 */
@media only screen and (device-aspect-ratio: 40/71) {

}

iPad 和 iPhone 发生翻转的时候,设备的宽度不会发生变化,因此不能通过 device-width 判断设备的方向,而是通过 orientation 判断的。

当然以上不是最全的,可以根据各自的需求组合出各种写法,欢迎继续补充(^__^)

参考阅读

© 2013 Applezqp. Powered by Jekyll