Question

我正在设计一个快速响应的网站，在将我的手机方向从纵向更改为横向，再到纵向后，CSS停止工作。

最初，我应用于320-480分辨率的CSS在我的人像屏幕和景观中加载得非常好但是当我将其改回肖像时，css停止工作，就像是没有加载css。 / p>

有什么问题????

Answer 1

使用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中移动视口宽度的良好做法。我希望这有帮助，你的问题就解决了。

Answer 2

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将背景设置为红色，最初在手机处于纵向模式时加载为红色但是当我将其更改为横向时，然后返回到肖像就像选择器那样＆＃39; t退出。

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

2 个答案: