媒体查询CSS麻烦

Question

我有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%; }
}

我尝试在没有媒体查询的情况下将上述值用作默认值，并且它具有所需的效果，因此它与查询本身有关。我如何得到divs＆＃39;只有在上述分辨率的屏幕上查看时，宽度才能变为66/33％？

Answer 1

试试这个：

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

}