肖像方向的媒體查詢似乎不起作用

Question

我的肖像方向媒體查詢似乎不起作用。任何想法，我做錯了，請？

HTML：

<div class="titleCard" id="first" style="background-color:white"></div> 

CSS：

html, body { -webkit-backface-visibility:hidden;} 

#first { 
    background-color: #000; 
    width: 100%; max-width: 1920px; 
    height: 100%; max-height: 1080px; 
    background: url('images/bg.png') no-repeat center; 
    background-size:cover; 
    position:relative; 
} 

.bgwidth { width: 100%; max-width: 1920px; } 
.bgheight { height: 100%; max-height: 1080px; } 

@media all and (orientation:portrait) { 
    background: url('images/Mobile_Art.jpg') no-repeat center; 
} 

Answer 1

它的工作原理（simplified test）。只是你沒有告訴它當方向改變時它應該改變background的元素。

你可能意味着有類似：

@media all and (orientation: portrait) { 
    #first { 
     background: url('images/Mobile_Art.jpg') no-repeat center; 
    } 
} 

代替：

@media all and (orientation:portrait) { 
    background: url('images/Mobile_Art.jpg') no-repeat center; 
}