更改設備方向後CSS停止工作

Question

我在設計一個響應式網站，並將我的手機方向從縱向更改爲橫向，然後更改爲縱向CSS停止工作。

最初，我應用於320-480分辨率的CSS在我的肖像屏幕和景觀中加載得非常好，但是當我將其更改回肖像時，CSS停止工作，就像不加載CSS。

什麼問題？

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將背景設置爲紅色，當手機處於肖像模式時，最初它會以紅色加載，但是當我將其更改爲風景然後回到肖像時，就像那個選擇器doens't退出。