更改设备方向后CSS停止工作

我正在设计一个响应性强的网站，在将手机方向从纵向改为横向，然后再改为纵向后，CSS停止工作

最初，我应用于320-480分辨率的css在我的纵向屏幕和横向屏幕中加载得非常好，但当我将其更改回纵向时，css停止工作，就像没有加载css一样

有什么问题吗？？？

css

@media all and (min-device-width: 320px) and (max-device-width: 480px){
    #reviews{
        display: none !important;
    }
    .footer {  
        border: 1px solid #CCCCCC !important;   
    }
    ul,ol{
        margin-left: 0px!important; 
    }
    .bottom-menu ul{
        margin-left: 25px !important;
    }
    #side-quote{
        display: none;
    }
    #export-dption{
        float: bottom;
    }
    #export-request{
        float: top;
    }
    .panoramic-pic{
        padding: 0px !important;
    }
    #googleMap{
        display: none;
    }
    .quote-index{
        width: 100% !important;
        background: red !important;
    }
}

手机是LG Optimus F3，浏览器是chrome

---

正如您在选择器中所看到的。quote index将背景设置为红色，当手机处于纵向模式时，它最初以红色加载，但当我将其更改为横向时，然后返回到纵向，就像选择器没有退出一样。

使用css媒体查询时，无需指定最小宽度，如果希望在不同点更改布局，可以使用“最大宽度”并进行多个查询。我无法解释为什么您的css最初可以工作，但当您打开屏幕几次后会发生变化，但以下是一些很好的css媒体查询实践和语法，可以解决您的问题：

@media only screen and (max-width: 320px){
    /*Some css styling for widths below 320 pixels*/
}
@media only screen and (max-width: 480px){
    /*Some css styling for widths below 480 pixels.
    Keep in mind that this css will only be applied for viewports between 320
    pixels and 480 pixels*/
}

---

如果只需使用宽度，则无需使用设备宽度。另外，“仅屏幕和（）”是检测css中移动视口宽度的良好实践。我希望这能帮助您解决问题。

如果没有代码或是什么手机，我们怎么知道它是什么？我以为这是移动设备中的常见问题，嗯……没有。以前从未见过。您可以编辑您的问题，并将此代码添加到实际问题中。答案应该是答案。