Css 桌面1024 vs ipad的媒体查询

我需要将我的网站设置在桌面（1024*768）和ipad上，但我无法将其可视化

我在Ipad中使用：

@ media only screen and (min-device-width: 768px) and (max-device-width : 1010px) 

和桌面：

@ media (min-width: 1020px) 

---

它可以在Firefox中使用，但不能在Chrome中使用。

为什么不直接级联呢

@媒体屏幕和（最大宽度：1024px）{/*样式*/}

@媒体屏幕和（最大设备宽度：768px）{/*样式*/}

---

1024x768无论如何都是iPad大小。

与其尝试针对特定的设备，不如针对您的布局设置适当的断点。也就是说，逐渐缩小浏览器的范围，并观察此特定设计需要回流的点。然后设置应用于这些点的样式，并让每个设备接收其尺寸范围内最适合的布局

因此，我建议您将以下内容放在页面的开头：

<meta name="viewport" content="width=device-width">

这方面的组合太多了，以上只是一个粗略的例子。您并不总是需要最大值和/或最小值。这取决于布局

---

使用ems而不是px也有争议，但我现在不去那里。：）

这是有道理的。但是设备像素比例呢？示例：@media-only屏幕和（设备宽度：320px）和（设备高度：640px）以及（-webkit设备像素比：3）是的，如果您愿意，可以将这些设置为目标。我不确定问题是什么。好吧，你上面的列表没有带像素比率项（因此它是否意味着是1？）。我们应该有三张清单和你的一样吗？一个没有信息（像你的），一个有比率1，一个比率2和比率3等等？实际上，我正在努力构建我的“网格”，这让人非常困惑。有些台式机（如图书馆）有1024台电脑。。。iGues IPad也是1024…

您上面的列表中没有像素比率项（因此它是否意味着为1？

）。这只是一个示例列表，基于您可能需要的设置。上面的示例仅基于屏幕大小，但是可以，您也可以通过指定特定的像素密度来优化媒体查询。同样，不要担心每个设备的像素数。只需确保布局在不同的屏幕宽度下看起来正常，并在需要时进行更改。

/* default styles, perhaps for basic mobiles and older browsers */

/* end default styles */

@media only screen and (min-width: 1025px) { }

@media only screen and (min-width: 701px) and (max-width: 1024px) { }

@media only screen and (max-width: 700px) { }

@media only screen and (min-width: 320px) and (max-width: 480px) { }