试图了解媒体查询

Question

我在css中设置了以下3个媒体查询

int&

当我检查我的页面以获得适当的屏幕时，最后一个媒体查询总是覆盖维度。我不确定为什么会发生这种情况，即使在为该屏幕指定正确的最大和最小宽度之后

第一个媒体查询是Iphone 6，第二个是Iphone 5，第三个是Iphone 4

Answer 1

最后一个是覆盖其他人，因为iPhone4尺寸介于320px和480px之间。具体来说，iPhone4的宽度为320px，并且满足最后一次媒体查询。

因此，您需要重新考虑如何处理此问题的策略。

Answer 2

仅@media屏幕和（min-device-width：320px）和（max-device-width：480px）{             ＃主容器{                 宽度：320px;                 身高：480px;             }         }

    Instead of min-device-width and max-device-width:
    use can use:: min-width and max-width

 this should work

Answer 3

为什么你有所有这些媒体查询...为什么不使用1媒体查询移动...

由于定义了宽度重叠，所有媒体查询都会相互覆盖。

仅@media屏幕和（min-device-width：320px）和（max-device-width：767px）{     ＃主容器{         宽度：100％;     } }