0

我只有两周的时间让我的网站在 iPad iPhone 上运行，只需要更改一些边距和一些字体大小。我在网上找到了这个教程，说要添加这个代码：

<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)"  href="css/style_ipad.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="css/style_ipad.css" />
<!--<![endif]-->

所以我在我的普通样式表的链接上方添加了这个，并用我的调整上传了 style_ipad.css，但它没有奏效。任何人都知道为什么这不起作用？这是过时了吗？

4

2 回答 2

2

它并没有过时，但是由于您说您将其添加到普通样式表之上，因此您的样式规则很可能被覆盖了。毕竟，它们是级联样式表。

另外我想指出，您css/style_ipad.css在两个链接标签中都链接到了同一个文件。

于 2012-06-13T00:39:43.317 回答
1

使用“设备宽度”定义媒体查询时，您必须记住它指的是渲染屏幕的实际像素宽度（这在视网膜显示器上会变得很棘手） - 请参阅http://www.w3中的第 4.3 节.org/TR/css3-mediaqueries/。要获得实际宽度，您必须使用像素比率来解释它。

但是您也可以简单地更改媒体查询以检查您的文档输出到的浏览器/视口的宽度。只需删除device您的查询部分：

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

device-width有关和之间区别的更完整定义，请参阅这两个回复width：

移动网络的最大设备宽度和最大宽度有什么区别？

CSS媒体查询中宽度和设备宽度的区别

于 2012-06-13T23:12:03.320 回答