CSS中的媒体查询

时间:2012-03-01 08:36:05

标签: html css media-queries

我正在尝试为平板电脑应用CSS。平板电脑的显示屏较大,但像素密度并不像iPhone 4,三星Galaxy Nexus等那样高。

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

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

2 个答案:

答案 0 :(得分:1)

您可以尝试这些可能对您有所帮助的媒体查询。

<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)" />

使用设备宽度范围,您可以轻松定位设备我知道有很多设备需要定位,但一般来说,您可以通过这种方式定位设备。

答案 1 :(得分:1)

您可以使用min-device-pixel-ratio查询来定位高像素密度设备,如下所示:

<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)' />

这将针对宽度超过600像素的高分辨率显示器