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尺寸。

桌面1024与ipad的媒体查询

2 个答案: