优化较小屏幕所需的CSS媒体查询？

我没有太多接触CSS媒体查询；我基本上是通过实验来学习的。我正在尝试优化我的网站，使其在所有设备上看起来都很好。如果浏览器宽度较大（桌面设备，包括视网膜显示器），我希望它使用特定的CSS文件；如果是平板电脑（iPad或其他，包括视网膜），则使用不同的CSS文件；对于小屏幕（iPhone或其他，包括视网膜），则使用不同的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 (-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 -->

这在台式计算机上非常有效，但是视网膜显示MacBookPro使用手机CSS文件而不是桌面文件。iPad显示的是平板电脑优化版，但Retina显示的iPad使用的是手机优化的CSS文件。iPhone使用手机CSS文件显示页面，Retina display iPhone也显示页面。我不知道我的网站在其他设备上看起来如何，因为我只有苹果设备可供测试

---

因此，我的CSS链接显然设置不正确。我怎样才能正确地设置它？除了视网膜显示器，我不想瞄准任何特定的设备。Windows平板电脑应该使用平板电脑CSS文件，而不仅仅是iPad。这可以通过3个CSS链接和3个文件来实现吗？一个用于桌面（大于1024像素？），一个用于平板电脑（小于1024像素），一个用于手机（小于640像素）？或者我必须做这些链接，然后为每个视网膜设备、rMBP、iPad和iPhone另外创建一个链接？甚至创建3个以上的CSS文件？

您不需要检测视网膜显示，只需检测设备宽度即可：

<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个文件。

原始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 -->

可以编写psuedo代码中的原始链接-

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

这就是为什么retina 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 -->

---

这在功能上是等效的。

谢谢，谢谢你建议将它们合并到同一个文件中。我完全实现了我想要的！虽然我必须使用最大设备宽度，而不仅仅是设备宽度。再次感谢！