-1

ツールバーとメイン div があるレイアウトを作成しようとしています。ウィンドウの Y 軸がウィンドウの X 軸より小さい場合、ツールバーは左側に表示されます。また、ウィンドウの X 軸がウィンドウの Y 軸よりも小さい場合、ツールバーは上部に表示されます。ツールバーを top:0 と left: 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 の例はこちら

4

2 に答える 2

6

これは、を使用して行うことができます@media screen and (min-aspect-ratio: 1/1) { ... }。このクエリ内のスタイルは、ウィンドウの幅が同じか、ウィンドウの高さよりも広い場合にのみアクティブになります。

デモ

このコードを追加し、すべてのJavaScriptを削除しました。

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

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

情報はここMDNで見つけることができます

メディアクエリのサポートはここにありますが、JavaScriptを使用できるため、Respond.jsを使用してすべてのユーザーが機能するようにすることをお勧めします。

于 2013-01-03T09:38:20.047 に答える
2

メディア比率に賛成票を投じてください ;)

より多くのブラウザー互換性:

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

この CodePenを参照してください。

于 2013-01-03T09:47:28.067 に答える