0309.2013

154

iPhone,iPad 等常用移动设备的 CSS3 Media Queries

CSS by FG

什么是 CSS3 Media Queries

CSS3 中的 Media Queries 可以让我们设置不同类型的媒体条件,并根据对应的条件,给相应符合条件的媒体调用相对应的样式表。现在最常见的一个例子,就是可以同时给 PC 的大屏幕和移动设备设置不同的样式表。这功能是非常强大的,它可以让我们定制不同的分辨率和设备,并在不改变内容的情况下,制作的网页在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。

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 */
}