web-dev-qa-db-ja.com

CSSは縦または横の画面サイズに基づいて拡大しますか？

2つのdivが隣同士に浮かんでいます。私が望むのは、縦向きモードで見ているときに100pxの幅にして、横向きに200pxとしましょう。これは実際にはモバイルデバイスでの表示で発生します。

したがって、divは横長モードの場合は拡大し、縦長モードの場合は少し縮小します。

何か案は？

cssmobilelandscapeportrait
18
Xtian

まあ、これはCSS2では不可能ですが、Javascriptであなたがやりたいことを行うことができます（画面サイズなどを読みます）。

どのテクノロジーを検討しているのかはわかりませんが、CSS3は CSS3 Media Queries を使用して、必要なものを正確に提供します。

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

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

詳細については この例のページ を確認するか、 これ を確認してください。

[〜＃〜] edit [〜＃〜]今日このページを見つけたという理由だけで ハードブロイリングされたCSS3メディアクエリ -非常に良い記事。

55
Dennis G

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

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

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

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

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

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

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

以下は、縦向きと横向きに影響する代表的なメディアクエリです。

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

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

 }
2
kasper Taeymans