css – 媒体查询平板电脑肖像及以下

/* tablets porTrait */
@media only screen 
and (min-device-width : 768pX) 
and (max-device-width : 1024pX)
and (orientation : porTrait) { 

}

/* phones */
@media screen and (max-device-width: 640pX) { 

}

/* tablets porTrait and phones 
Is it possible to have only one media query for this that do the same than the other media queries together?
*/

没有.

为什么？

iPad和iPhone是不同的设备,具有不同的屏幕尺寸,分辨率和不同的像素密度(基于不同的版本/版本 – 见here).

Device                     Screen(res)   CSS pixel ratio
iPad   (generation 1,2)    1024 × 768    1
iPad   (generation 3,4)    2048 × 1536   2
iPhone (gen 1,3G,3GS)      480 × 320     1
iPhone (gen 4,4S)          960 × 640     2
iPhone (gen 5)             1136 x 640    2

iPad被归类为平板电脑,iPhone是移动设备,因此您永远无法使用一个媒体查询来完全满足这两个要求,也无法为这两种设备创造理想的体验.

我能做什么？

一种解决方案是提供一种相当常见的方法,并为3个级别的设备类型和/或屏幕宽度/方向提供媒体查询：

>手机/智能手机
>平板电脑
>桌面

基本理论是您需要在尽可能多的设备上使用您的站点或应用程序,从而使您的方法标准化,而不是错过过多的单个设备和/或制造商.

一个粗略的例子可能是：

@media screen and (max-width:500pX) {
   /* Mobile styles */
}
@media screen and (min-width:501pX) and (max-width:999pX) {
   /* Tablet styles */
}
@media screen and (min-width:1000pX) {
   /* Desktop styles */
}

但是对于这三种类型之间的最佳断点,观点差异很大,我知道这些断点的研究/数据会受到开发者社区的广泛欢迎.

如果我想专门针对iOS设备怎么办？

你可以这样做.有些人提出了满足特定iOS设备特定要求的媒体查询(未经过测试,但我经常看到我下面列出的链接)：

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

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

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

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

其他人针对iOS的其他努力：

> CSS Media Queries for iPads & iPhones
> Basic iPhone And iPad Screen Component Pixel Dimensions
> ios-test.css – media queries for iOS devices
> SO question: iPhone 5 CSS media query

一般参考：

> Media query features (at W3C)
> Wikipedia entry
> Responsive design testing tool

警告

我上面使用了一个示例方法,但可以通过多种方式应用媒体查询：

@media screen and (max-width:500pX) { ... }
@import url(mobile.css) (max-width:500pX);
<link rel="stylesheet" type="text/css" media="screen and (max-width: 500pX)" href="mobile.css" />