34

最近のデスクトップおよびラップトップの画面の大半は、高さよりも幅が広くなっています。画面は「縦」ではなく「横」。スマートフォンは、携帯電話の向きがコンテンツの表示方法に影響を与えることを可能にすることで、かなりクールなことを行いました.

これをメディア クエリで実行したいと思います。大きなモニターを搭載した Mac を使用しているユーザーがブラウザ ウィンドウのサイズを非常に「高い」(高さが幅よりも大きい) 場合に、ヘッダーとフッターが表示されるようにします。しかし、フルスクリーンまたは「ワイド」 (幅が高さよりも大きい) にすると、サイドバーが左側に表示され、場合によっては右側にも表示されます。

ワイドスクリーンや向きなどを最大限に活用しようとしています。メディア クエリまたは JavaScript でこれを行う方法は?

4

2 に答える 2

26

もうお持ちだと思いますが、通りすがりの方の例を次に示します。前の人が言ったように、人々は時間をかけてこれを読むべきです: http://www.w3.org/TR/css3-mediaqueries/

さて、ここに答えがあります。@media ルールで幅と高さと組み合わせて「横向き」または「縦向き」を指定できます。これは、高さが幅よりも大きいこと、およびその逆であることを前提としています。私は通常 min-width のみを使用し、それらに対して個別の @media ルールをいくつか用意しています。一例として、横: 水平スクロール (デスクトップ) と縦: 通常の垂直 (タブレット/電話) があります。

ただし、この 2 つは単独では機能しないため、いくつかの組み合わせが必要になります。幅 600px 未満の画面では、サイドバーが邪魔になると想定できると思います。

/* 01 */
@media (min-width: 0) {
   /* this is the same as not using a media query... */
   .main-content {
     width: 100%;
     float: left;
   }

   .side-bar {
     width: 100%;
     float: left
   }

}


/* 2 */
@media (min-width: 600px) and (orientation:landscape) {

   .main-content {
     width: 70%;
     float: left;
   }

   .side-bar {
     width: 30%;
     float: left
   }

}

HERE は jsfiddle です- box-sizing: border-box; に注意してください。パディングの問題に使用されます。

2017年更新

今ではほとんどの人がフレックスボックスを使用すると思います: https://jsfiddle.net/sheriffderek/egxcgyyd/

.parent {
  display: flex;
  flex-direction: column;
}

@media (min-width: 600px) and (orientation:landscape) {
  .parent {
    flex-direction: row;
  }
  .child-1 {
    min-width: 260px; /* or flex-basis: xx - try them both */
  }
  .child-2 {
    flex-basis: 100%; /* "if at all possible... please try to be this size..." */
  }
}
于 2013-04-09T15:40:29.507 に答える
3

メディアクエリは、おそらくそれをサポートする最新のブラウザのソリューションになるでしょう。ここからドキュメントのコピーを入手できます。

http://www.w3.org/TR/css3-mediaqueries/

ただし、次のチュートリアルが役立つ場合があります（Google for：Media Queries Tutorial）：

http://webdesignerwall.com/tutorials/css3-media-queries

画面が特定の解像度を下回った場合に要素を非表示にするなどの基本を理解したら、次のようにします。

@media screen and (max-width: 600px)
{
  .sidebar
  {
    display: none;
  }
}

お役に立てれば。

于 2012-06-02T01:06:06.640 に答える