CSS媒體查詢取向的變化調整

我不能完全肯定這應如何在臺式機上工作，但我敢肯定，當你調整瀏覽器，方向應該改變（提供的高度比大寬度和調整大小後是相反的方向）。CSS媒體查詢取向的變化調整

這樣說，我不知道爲什麼下面的代碼只配備在頁面加載的效果。

@media all and (orientation: portrait) { 
    .slider-slide { 
    background-size: auto 100% !important; 
    } 
} 
@media all and (orientation: landscape) { 
    .slider-slide { 
    background-size: 100% auto !important; 
    } 
}

基本上我想要這段代碼要做的是根據方向調整背景圖像的大小。如果我對頁面加載，無論是正常工作調整的頁面，但是當我調整窗口的大小上飛，這是行不通的。有任何想法嗎？

來源

2013-10-25 Eduard Luca

你應該使用jquery調整大小 –

@ C-Link，這是我的最後一個選擇，以防CSS不起作用。你知道我的CSS不能以任何方式工作嗎？ –

對不起，我不知道用css ...... –

Fabrizio Calderan的solution對於給定的用例來說是最好的，但是如果你需要檢測到肖像和風景的變化，原始問題的答案是，這是可行的。

你可以看到http://robertnyman.com/css3/media-queries/media-queries.html的工作示例。

主要的區別我看到的是，羅伯特用screen代替all。所以：

@media screen and (orientation: portrait) { 
    ... 
}

除此之外，瀏覽器可能有一些差異。羅伯特的解決方案在Chrome和FF中爲我工作。我不確定其他瀏覽器。（在旁註中，必須比caniuse.com有更好的caniuse :)）

來源

2014-07-25 18:34:29

CSS媒體查詢取向的變化調整

回答

相關問題