更改布局方向更改，导航和李元素固定或静态

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; 
    } 
} 

使用媒体查询，你会少写很多代码，浏览器会做腿部的工作重新渲染你的页面时的方向变化。