媒体查询问题错误顺序?
我有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
}
Heey感谢你的答案之间活跃的两个,是啊,听起来合乎逻辑但奥克,我会尽力做到这一点。我会让你知道它是否适用于所有人,谢谢! – GesterFromHolland
不用担心。它工作? – Tom
这些媒体查询是320像素和480像素 – Tom