Javascript 灵活的分区布局

我正在尝试编写一个布局，其中有一个工具栏和一个主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;
}
}

---

您可以使用

@媒体屏幕和（最小纵横比：1/1）{…}

来完成此操作。此查询中的任何样式仅在窗口宽度等于或大于其高度时激活

我添加了此代码，并删除了所有JavaScript：

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

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

信息可以找到

---

可以找到对媒体查询的支持，但由于您可以使用JavaScript，我建议您使用JavaScript使其适用于所有用户。

Upvote for the Media ratio；）

更兼容浏览器：

window.onresize = function(event) {
    winW = window.innerWidth;
    winH = window.innerHeight;

    console.debug("x axis:" + winW  + "y axis:" + winH);

    document.getElementById("div1").className = ( winW < winH ? "verticalMenu" : "horizontalMenu" );
}

// optionally invoke window.resize() once manually for setting it default. Or set a defaultClass on the div itself in HTML

---

请参阅。

CSS@media querys会在紧要关头这样做。捏一下！你应该给它加一个单位！px，%…伟大的解决方案！非常感谢你！这是最好的解决方案，只是另一个问题。如何使div垂直展开以适应页面？它不起作用。该div没有调整大小。只有当我输入一个像素值时，div才会调整大小。@Jacob将高度设置为100%，只要

html，body

也有

height:100%

就可以了，检查fiddle

window.onresize = function(event) {
    winW = window.innerWidth;
    winH = window.innerHeight;

    console.debug("x axis:" + winW  + "y axis:" + winH);

    document.getElementById("div1").className = ( winW < winH ? "verticalMenu" : "horizontalMenu" );
}

// optionally invoke window.resize() once manually for setting it default. Or set a defaultClass on the div itself in HTML

.horizontalMenu {
    height:20px;
    width:100%;
}
.verticalMenu {
    height:100%;
    width:20px;
}