21

隣り合って浮かんでいる2つのdivがあります。私が欲しいのは、ポートレートモードで見ているときに100ピクセルの幅を持ち、ランドスケープで200ピクセルとしましょう。これは、実際にモバイルデバイスで表示すると発生します。

したがって、divは、横向きモードでは拡大し、縦向きでは少し縮小します。

何か案は？

4

2 に答える 2

61

これはCSS2では不可能ですが、Javascriptでやりたいことを実行することは可能です（画面サイズなどを読み上げてください）。

調べているテクノロジーはわかりませんが、CSS3はCSS3メディアクエリで必要なものを正確に提供します。

CSS3を使用すると、次のような楽しいものがあります（または、200pxなどの幅を指定することもできます）。

/* Portrait */
@media screen and (orientation:portrait) {
   /* Portrait styles here */
}
/* Landscape */
@media screen and (orientation:landscape) {
   /* Landscape styles here */
}

詳細については、このサンプルページ、またはこのページを確認してください。

編集私が今日このページを見つけたという理由だけで：ハードブロイルドCSS3メディアクエリ-非常に良い記事。

于 2010-10-04T19:45:55.780 に答える
2

これは、cssメディア機能の「オリエンテーション」を使用して行うことができます。このようにして、画面サイズとは関係なく、画面の向きに応じてスタイルを指定できます。このメディア機能に関する公式のw3.org定義は、ここにあります。developer.mozilla.orgの仕様と組み合わせて、これがどのように機能するかを説明します。

「オリエンテーション」メディア機能についてのw3.orgからの引用：

'<strong>height'メディア機能の値が'<strong>width'メディア機能の値以上の場合、'orientation'メディア機能は'portrait'です。それ以外の場合、「方向」は「風景」です。

「オリエンテーション」機能に関するdeveloper.mozilla.orgからのメモ/引用：

注：この値（つまり、縦向きまたは横向き）は、実際のデバイスの向きに対応していません。ほとんどのデバイスでソフトキーボードを縦向きで開くと、ビューポートが高さよりも広くなり、ブラウザが縦向きではなく横向きのスタイルを使用するようになります。

繰り返しになりますが、縦向きまたは横向きのメディアクエリをトリガーするのは、実際には画面の向きではありません。ただし、画面の高さと幅の比率です！このため、非モバイル/触覚デバイスで「オリエンテーション機能」を使用することも理にかなっています。したがって、これらのメディアクエリの動作を示す小さなデモを追加しました。

JSFIDDLE DEMO （ビューポートのサイズを変更してみてください）

これは、縦向きと横向きに影響を与える代表的なメディアクエリです。

 @media screen and (orientation:portrait) {
     /* Portrait styles */
     /*set width to 100px */

 }
 @media screen and (orientation:landscape) {
     /* Landscape styles */
     /* set width to 200px*/

 }
于 2015-03-21T12:13:33.120 に答える