css - 桌面 1024 与 ipad 的媒体查询

Question

我需要在桌面（1024 * 768）和ipad上设置我的网站，但我无法将他的Vizualization分开。

我在 Ipad 中使用：

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

和桌面：

@ media (min-width: 1020px) 

它适用于 Firefox，但不适用于 Chrome。

Answer 1

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

所以，在你的页面的头部，我建议你把这个：

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

然后在你的样式表中，使用这样的东西（数字是任意的）：

/* 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) { }

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

还有一个说法是使用 ems 代替 px，但我暂时不会去那里。:)

Answer 2

为什么不直接向下级联？

@media screen and (max-width : 1024px){ /*Styles*/ }

@media screen and (max-device-width : 768px){ /*Styles*/ }

无论如何，1024x768 是 iPad 尺寸。