ポートレートまたはランドスケープの画面サイズに基づいて拡大するCSS？

StackOverflow https://stackoverflow.com/questions/3858466

質問

隣同士に浮かんでいる2つのDIVがあります。私が望むのは、ポートレートモードで見ているときに100pxの幅を持たせることであり、ランドスケープで200 pxとしましょう。これは、実際にモバイルデバイスで表示されます。

そのため、divはランドスケープモードで拡張し、ポートレートで少し縮小します。

何か案は？

役に立ちましたか？

解決

これは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メディアクエリ - 非常に良い記事。

他のヒント

これを行うには、CSSメディア機能「Orientation」を使用できます。これにより、画面サイズとは無関係に、画面の向きに応じてスタイルを指定できます。このメディア機能に関する公式w3.orgの定義を見つけることができます ここ. 。の仕様と組み合わされます developer.mozilla.org これはそれがどのように機能するかを説明します。

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

「オリエンテーション」メディア機能は、「ポートレート」です。身長'メディア機能は 等しいまたは等しい の価値に幅'メディア機能。それ以外の場合は、「オリエンテーション」は「風景」です。

「オリエンテーション」機能についての開発者.mozilla.orgからのメモ/引用：

注：この値 （すなわち、肖像画や風景） します いいえ 実際に対応しています デバイスの向き。ポートレートオリエンテーションでほとんどのデバイスにソフトキーボードを開くと、ビューポートが背が高くなるよりも広くなり、ブラウザがポートレートの代わりにランドスケープスタイルを使用します。

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

jsfiddleデモ （ビューポートをサイズ変更してみてください）

肖像画と風景の向きに影響を与える代表的なメディアクエリは次のとおりです。

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

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

 }
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top