0

我对 CSS 媒体查询的接触不多。我基本上是通过实验来学习的。我正在尝试优化我的网站，使其在所有设备上看起来都不错。如果浏览器宽度很大（桌面设备，包括 Retina 显示器），我希望它使用特定的 CSS 文件；如果它是平板电脑（iPad 或其他，包括 Retina），我希望它使用不同的 CSS 文件，以及用于小屏幕的不同 CSS 文件（iPhone 或其他，包括 Retina）。我当前的设置包括在下面，以及它们的结果。

<link rel="stylesheet" type="text/css" href="stylesheets/prevhome.css" /> <!--Desktop -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width : 1024px), screen and (-webkit-min-device-pixel-ratio: 2)" href="stylesheets/tablet.css" /> <!-- Tablet -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 640px), screen and (-webkit-min-device-pixel-ratio: 2)" href="stylesheets/phone.css" /> <!-- Phone -->

这在台式电脑上效果很好，但 Retina 显示屏 MacBook Pro 使用的是电话 CSS 文件而不是桌面文件。iPad 显示平板优化版本很棒，但 Retina 显示 iPad 使用的是手机优化的 CSS 文件。iPhone 使用 Phone CSS 文件可以很好地显示页面，而 Retina 显示屏 iPhone 也可以很好地显示它。我不知道我的网站在其他设备上的外观如何，因为我只有 Apple 设备可供测试。

所以，我的 CSS 链接显然设置不正确。我怎样才能正确设置它？除了 Retina 显示器，我不想针对任何特定设备。Windows 平板电脑应该使用平板电脑 CSS 文件，而不仅仅是 iPad。这可以用 3 个 CSS 链接和 3 个文件来完成吗，一个用于桌面（大于 1024 像素？），一个用于平板电脑（小于 1024 像素），一个用于手机（小于 640 像素）？还是我必须创建这些链接，然后为每个 Retina 设备、rMBP、iPad 和 iPhone 额外创建一个链接？甚至创建超过 3 个 CSS 文件？

4

2 回答 2

0

您不需要检测 Retina 显示器，只需检测device-width：

<link rel="stylesheet" type="text/css" href="stylesheets/prevhome.css" /> <!--Desktop -->
<link rel="stylesheet" type="text/css" media="screen and (device-width : 1024px)" href="stylesheets/tablet.css" /> <!-- Tablet -->
<link rel="stylesheet" type="text/css" media="screen and (device-width: 640px)" href="stylesheets/phone.css" /> <!-- Phone -->

出于 Web 性能的原因，所有这些都可以使用单个 CSS 文件完成，使用@media (...) { selector1 { property: value; } }媒体规则块而不是有条件地加载 1 到 3 个文件。

于 2013-01-13T05:16:15.613 回答
0

您的原始 CSS 链接的问题是您有两个条件（逗号表示交替），但您没有在第二个提供任何宽度条件 -

<link rel="stylesheet" type="text/css" href="stylesheets/prevhome.css" /> <!--Desktop -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width : 1024px), screen and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2)" href="stylesheets/tablet.css" /> <!-- Tablet -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 640px), screen and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 2)" href="stylesheets/phone.css" /> <!-- Phone -->

伪代码中的原始链接可以写成——

“最大宽度为 1024像素的屏幕或最小设备像素比为 2 的屏幕”

这就是视网膜 MacBook 加载手机和平板电脑样式的原因。

当然，由于您没有为更高像素密度的情况加载特定/不同的样式表，因此您的原始链接可以写为-

<link rel="stylesheet" type="text/css" href="stylesheets/prevhome.css" /> <!--Desktop -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width : 1024px)" href="stylesheets/tablet.css" /> <!-- Tablet -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 640px)" href="stylesheets/phone.css" /> <!-- Phone -->

这在功能上是等效的。

于 2013-01-13T19:16:41.823 回答