更改佈局方向更改，導航和李元素固定或靜態

Question

僅可使用CSS /媒體查詢更改方向更改reliably and cross browser的佈局是否可能？我認爲它甚至不在最新的瀏覽器中，是嗎？

看着人們試圖可靠地確定與CSS只和device-height和device-widthbeing deprecated我想我更建議使用JavaScript來做到這一點，正確的縱向和橫向的跨瀏覽器的許多問題？

與this question類似我試圖根據縱向和橫向更改導航佈局。

肖像

景觀

這是我用JavaScript和VergeJS方法（因爲它可以可靠地檢測視口的高度和寬度），以下是我將會將類應用於li如果body指定了portrait或landscape類，然後在橫向定位時檢查視口高度，則將它們定位爲所需的元素。

// Cross browser portrait landscape detection 

// Get viewport width and height values 
// http://stackoverflow.com/q/40672125/1010918 
function getVergeValues(){ 
    viewportWidth = verge.viewportW() 
    viewportHeight = verge.viewportH() 
    console.log('viewportWidth = '+viewportWidth); 
    console.log('viewportHeight = '+viewportHeight); 
}; 
getVergeValues(); 
window.addEventListener('resize', getVergeValues); 

// http://pioul.fr/cross-device-cross-browser-portrait-landscape-detection 
function portraitLandscape(){ 
    screenOrientation = (viewportWidth > viewportHeight)? 90 : 0; 
    console.log('screenOrientation = '+screenOrientation); 
    if (screenOrientation == 0) { 
    body.classList.add('portrait'); 
    body.classList.remove('landscape'); 
    } 
    else if (screenOrientation == 90) { 
    body.classList.remove('portrait'); 
    body.classList.add('landscape'); 
    } 
}; 
portraitLandscape(); 
window.addEventListener('resize', portraitLandscape); 

CSS/SCSS看起來像這樣。

// Landscape layout for navigation on mobile 
ul{ 
    li{ 
// depending on number of li elements I would also 
// have to change the width values, assigning a grid of some sort. 
// again I assume this can ONLY be done with JS reliably?? 
    width: 33.3333333333%; 
    display: inline-block; 
    float: left; 
    a{ 
     border-right: 1px solid black; 
    } 
    } 
    li:last-child a { 
    border-right: none; 
    } 
} 

// Portrait layout for navigation on mobile 
ul { 
    padding: 0; 
    li { 
    list-style: none; 
    display: block; 
    margin: 0; 
    float: none; 
    width: 100%;  
    a { 
     display: block;  
    } 
    } 
} 

爲什麼這一切？
導航是fixed和top:0並且點擊/單擊菜單按鈕時li元素滑落，這些也是fixed。

我想避免在橫向方向li元素是無法到達，因爲他們伸展視口的高度。請注意，li元素的數量也有所不同，因此未設置，因爲它們都是固定的，如果它們中有很多，它們可能永遠無法以橫向方向到達它們。我不希望用戶不得不關閉設備才能看到所有li元素，並且完全讓用戶瀏覽該網站的方式。

與更少的代碼，並可能很容易做替代，我應該只是定位導航和li元素static如果橫向視高度小於則導航在內的所有li元素的高度？

是的，我是那種非常親切，不僅詢問這是否可以在CSS做只也問你，如果有任何一）正在爲li元素的網格，並保持他們fixed或B）定位的方法導航和li元素static如果，其中有很多，是首選。

Answer 1

CSS媒體查詢也可以檢測橫向或縱向方向而無需JavaScript開銷。

@media only screen and (orientation: landscape) { 
    .class-name { 
     declaration: value; 
    } 
}  

@media only screen and (orientation: portrait) { 
    .class-name { 
     declaration: value; 
    } 
} 

使用媒體查詢，你會少寫很多代碼，瀏覽器會做腿部的工作重新渲染你的頁面時的方向變化。