Question

我已针对240 * 480分辨率

撰写此媒体查询

@media only screen and (min-width:240px) 
                   and (max-width:480px) {
    .speech-bubble-container {
        right: 0 !important;
        width: 100% !important;
    }
}

321 * 480分辨率的另一个媒体查询

@media only screen and (min-width : 321px) 
                   and (max-width : 480px) 
                   and (orientation :landscape) {
    .speech-bubble-container {
        right: -48px !important;
    }
}

但是当我在240 * 480纵向模式设备中测试网站时，其权利：0属性不会覆盖右边：-48px; - 如何实现这一目标？

我想要正确执行：0表示240 * 480分辨率设备，但不是这样，它会被右边覆盖：-48px;

我是响应式设计的新手。

Answer 1

更改您的媒体查询，如下所示： SEE THE DEMO 以供参考。调整小提琴窗口的大小以查看其运行情况。当它处于纵向模式（宽度小于320像素）时，right: 0;将适用于横向模式（宽度大于321像素）时，将应用right: -48px;。

@media only screen and (max-width : 320px) {
    .speech-bubble-container {
        right: 0 !important;
        width: 100% !important;
    }
}

@media only screen and (min-width : 321px) {
    .speech-bubble-container {
        right: -48px !important;
    }
}

Answer 2

您的媒体查询重叠。第一个它没有说'240x480'。它说，从最小宽度240px到最大宽度480的范围使用这些样式。

380px宽度属于上述范围。

响应媒体查询覆盖

2 个答案: