灵活的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 Example Here

Answer 1

给予好评为媒体比;）

更多浏览器兼容的：

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

参见this CodePen。

Answer 2

可以使用@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; 
    }     
} 

信息可以发现here on the MDN

对媒体查询的支持，可以发现here，但你可以使用JavaScript我建议使用Respond.js使它们适用于所有用户。