为小屏幕优化需要 CSS 媒体查询吗？

Question

我没有太多接触过 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 文件？

Answer 1

您不需要检测 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 -->

出于网络性能原因，所有这些都可以通过一个 CSS 文件完成，使用 @media (...) { selector1 { property: value; } at-media 规则 block ，而不是有条件地加载 1 到 3 个文件。