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

Question

是否可以仅使用 CSS/媒体查询更改方向更改 reliably and cross browser 时的布局？我认为即使在最新的浏览器中也没有，是吗？

看着人们试图可靠地确定纵向和横向跨浏览器仅使用 CSS 和 device-height 和 device-width being 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 中完成，还询问您是否可以使用 A) 为 li 元素制作网格并保留它们 fixedor 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;
    }
}

使用媒体查询，您将编写更少的代码，并且浏览器会在方向改变时重新渲染您的页面。