灵活的div布局

Question

我正在尝试编写一个布局,其中有一个工具栏和一个主div.当窗口Y轴小于窗口X轴时,工具栏位于左侧.当窗口X轴小于窗口Y轴时,工具栏位于顶部.我将工具栏绝对定位在顶部:0和左:0并尝试在调整大小时更改宽度和高度属性.但我的代码不起作用.

使用Javascript:

window.onresize = function(event) {
winW = window.innerWidth;
winH = window.innerHeight;   
console.debug("x axis:" + winW  + "y axis:" + winH);

if(winW < winH){
   var elem = document.getElementById('div1');

    console.debug("test" + elem.style.width);

   var a = elem.style.height;
   elem.style.height = elem.style.width;
   elem.style.width = a;

}
else{
   var elem = document.getElementById('div1');

    elem.style.height = elem.style.height;
    elem.style.width = elem.style.width;
}
}

CSS:

#div1{
  background: red;
  position:absolute;
  height:100%;
  width:20px;
  top:0;
  left:0;
}
#div2{
  width:100%;
  height:500px;
  background-color:green;
  margin-left: 20px;
}

jsFiddle示例这里

Answer 1

你可以使用@media screen and (min-aspect-ratio: 1/1) { ... }.此查询中的任何样式仅在窗口宽或宽时才激活.

DEMO

我添加了此代码,并删除了所有JavaScript:

@media screen and (min-aspect-ratio: 1/1) { 
    #div1 {
        width: 100%;
        height: 20px;
    }

    #div2 {
        width: 100%;
        margin: 0;
     }                
}

可以在MDN上找到相关信息

可以在此处找到对媒体查询的支持,但由于您可以使用JavaScript,我建议您使用Respond.js使其适用于所有用户.