CSS中的媒体查询

我正在尝试为平板电脑应用CSS。片中有较大的显示，但像素密度不高作为例如iPhone 4，三星GALAXY Nexus等CSS中的媒体查询

<link href="css/mobile-tablet.css" media="all and (min-device-width: 600px)" rel="stylesheet" type="text/css" />

如果我这样做，智能手机也将获得CSS。是否有可能以另一种方式做到这一点？我不知道是否可以以厘米为单位检查像素的数量和屏幕的物理宽度，或者是否有更好的方法。

来源

2012-03-01 LuckyLuke

在媒体查询英寸/厘米是CSSinches/CSScentimeters。它们由标准来定义，并且可以与用尺子测量的结果大不相同。例如，一个CSSinch被定义为96像素，并且只能用标尺测量的三分之一。好的部分是这意味着大量的遗留代码继续工作。但不太好的部分是，这也意味着像英寸或厘米等物理措施在媒体查询中几乎是无用的，最坏的情况是完全误导。 – 2012-09-28 23:17:39

你可以尝试这些媒体查询，它可能会帮助你。

<link rel="stylesheet" type="text/css" href="ipad.css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)" /> 
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-device-width: 480px)" />

使用设备宽度的范围内，你可以轻松地定位设备，我知道有很多的设备为目标的，但一般而言，您的目标这样的设备。

来源

2012-03-01 09:23:27 w3uiguru

但我不仅仅是针对iphone/ipads – LuckyLuke 2012-03-01 09:33:20

我刚刚给你举例说明了在媒体查询中使用设备宽度，我的意图不是要告诉你专用于iPhone和iPad的方式，抱歉给您带来不便。 – w3uiguru 2012-03-01 09:59:16

您可以定位与所述最小设备像素比查询高像素密度器件像这样：

<link rel='stylesheet' href='highres.css' media='all and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 600px), all and (min-device-pixel-ratio: 2) and (min-device-width: 600px)' />

这将目标的宽度的高分辨率显示器上600px的

来源

2012-03-01 11:42:28

CSS中的媒体查询

回答

相关问题