Bootstrap隱藏的肖像，但顯示景觀

Question

比方說，我有一個UL與3李元素。如何在縱向模式下隱藏最後兩個li元素，並在橫向模式下顯示全部3個元素？使用CSS offcourse和Bootstrap 3

<div class="header-box pull-left"> 
    <ul> 
    <li class="usp"> 
    <a href="link" title="usp"> 
     <span class="usp-text">usp</span> 
    </a> 
    </li> 
    <li class="usp hide-for-xs"> 
    <a href="link" title="usp"> 
     <span class="usp-text">usp</span> 
    </a> 
    </li> 
    <li class="usp hide-for-xs"> 
    <a href="link" title="usp"> 
     <span class="usp-text">usp</span> 
    </a> 
    </li> 
    </ul> 
</div> 

我想這樣做：

.show-for-landscape{ 
display:block!important; 
} 

但如何與媒體查詢這項工作？什麼是一個好的屏幕尺寸設置等？

任何建議，更歡迎屆時

Answer 1

你可能有與靶向設備的方向，如媒體查詢更多的運氣：

@media screen and (max-device-width: 1000px) and (orientation:landscape){ 
    /*...your special rules for landscape...*/ 
} 

我不知道關於移動的全面支持瀏覽器的方向屬性，但我知道它適用於我所有的當前iOS和我的Android Galaxy Note和S4原生瀏覽器。我確實知道的是，這隻會針對移動設備 - 桌面瀏覽器完全忽略它 - 所以，設置爲1000px的最大設備寬度屬性將僅安全地影響移動設備，並且在桌面上查看時不會受到影響。

我也在網頁應用程序中成功地使用了這個（不是Bootstrap）。你必須測試：

@media screen and (min-aspect-ratio: 13/9){ } // landscape and 
@media screen and (max-aspect-ratio: 13/9){ } // portrait.