媒体查询 CSS 问题答案

【问题标题】：Media Queries CSS trouble媒体查询 CSS 问题
【发布时间】：2014-04-30 19:42:17
【问题描述】：

我有 2 个 div，ID 为 re1 和 re2，它们的宽度都设置为 100%，因为它们的最大宽度（800px 和 400px）意味着两个 div 将在我的容器中保持在同一行最大宽度为 1200px。这也意味着在手机上，当两个 div 堆叠在一起时，每个 div 将填满屏幕的宽度。问题出现在中型屏幕上，即。 ipad，屏幕的大小意味着两个 div 都在单独的行上，但是由于它们的最大宽度，它们具有不同大小的宽度，这看起来很糟糕。所以我尝试使用媒体查询来改变它们的宽度，以便它们在 ipad 上保持在同一行，但它似乎不起作用。

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  { 
#re1 { width: 66.67%; }
#re2 { width: 33.33%; }
}

我尝试在没有媒体查询的情况下将上述值用作默认值，并且它具有预期的效果，因此它与查询本身有关。只有在上述分辨率的屏幕上查看时，如何让 div 的宽度变为 66/33%？

【问题讨论】：

如果你的目标是 iPad 3 或 4，那么你应该使用webkit-min-device-pixel-ratio: 2。
尝试将宽度设置为您的 div 66.6% 和 33.3%，当容器有 1200 时，这与 800 和 400 的宽度相同。
@AlexPrinceton 试过了，没有运气。
@Barnee 我已经尝试了 1/2 并完全删除了 webkit，但没有一个对我有用。
prntscr.com/3etkk1 re1 和 re2 在 html 中错位。re2 在 1200px 容器之外。

标签： jquery html css ipad

【解决方案1】：

试试这个：

@media all and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1)  { 
#re1 { width: 66.67%; }
#re2 { width: 33.33%; }

}

【讨论】：

一个问题：为什么你也瞄准像素比率？无论如何，1 是默认值。
我刚刚从显示 ipad 正确分辨率的网站复制并粘贴了媒体查询代码。无论哪种方式，即使我没有针对它，它也不会做任何事情。
你能发一个 js fiddle 什么的吗？喜欢你的整个 CSS 文件吗？
prntscr.com/3etkk1 将 re1 和 re2 放在同一个容器中，然后重试我的代码
啊，我放错了</div> 我现在已经修复了这个问题，所以它们在同一个容器中，但仍然没有运气。