我有 16 个媒体查询或其他东西,我注意到如果我把每个媒体查询肖像 1 种不同的颜色,有些会落入另一个媒体查询。例如,我有:
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
例如,我有:
@media only screen and (min-device-width: 320px) and
(max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {}
然后两个背景都是红色的,但我把第二个背景放在紫色上。我指的是我自己的网站 www.gester.nl。有人可以帮助我并使用媒体查询代码查看网站,为什么某些媒体查询无法正常工作。是我用错了订单还是什么?我只是使用谷歌 f12 来查看它在其他设备上的外观。
您的媒体查询重叠。您需要使用如下所示的内容来定位特定的屏幕尺寸:
@media only screen and (min-width: 320px) and (max-width: 480px) {
// do stuff between 320px and 480px
}
@media only screen and (min-width: 481px) and (max-width: 568px) {
// do stuff between 481px and 568px
}