問題タブ [viewport-units]

だから私はビューポートユニットを発見したばかりで、本当にそれらを使いたいと思っています。

最初の課題：私の要素の「基本サイズ」は760x670ピクセルです。100vhビューポート単位を使用して、高さが、または幅が100vwのどちらか小さい方になるように拡大したいと思います。

残念ながら、100vmin2つのうち小さい方を取得するために使用できますが、適用できるのは幅または高さの両方ではなく、幅または高さの両方にのみ適用できます。

現在使用しているもの：

これにより、画面に合わせて幅が拡大縮小され、垂直方向にスクロールします。これはそれほど悪くはありませんが、実際にビューポートに合わせることができれば、私はそれを好みます。

新しいvw（およびvh、vminおよびvmax）CSSユニットは、と同様に非常に便利ですcalc。どちらもChrome（後者のプレフィックスは-webkit-calc）で正常に機能しますが、何らかの理由で、単位calcを含むプロパティ値が無効なプロパティ値を生成することがわかりました。これはまだ実装されていないのですか、それとも仕様ですか、それともバグですか？v*width: -webkit-calc(95vw - 25em)

スマートフォン用に以下のレイアウトを作成しています。iPhone、Android、ブラックベリーが主なターゲットです。レイアウトは、縦向きでも横向きでも同じです。横向きの場合は、幅に合わせて拡大縮小されます。私がやりたいのは、画面の向きが同じ相対位置にあるかどうかに関係なく、テキストの位置とサイズを設定することです。灰色のボックスは画像を表しています。このシナリオでは、特定のcssユニット、vw、em、または％に利点がありますか？

新しいvmincssプロパティを使用して、適切なフォントサイズを取得します。絶対に素晴らしい作品です！

この問題は、ページのサイズが変更されたときに発生します。たとえば、ページを小さくしても、font-sizeは変更されず、すべてがキルターになります。

まず、ブラウザはこれを処理することになっていますか？

第二に、それを処理するための最良の方法は何ですか？トリガーを使用してを設定する場合はfont-size、のフォントサイズ値とを知る必要があり、javascript失敗cssする状況が発生するようです。

vhの高さにdiv使用しvm、フォントサイズに使用する、広く使用されているケースでなければなりません。

css3

html - ケース 1

html - ケース 2

内で垂直方向に中央揃えするために使用する方法calc()や他のcss3プロパティはありますか?div.innerdiv.outer

私はレスポンシブ デザインを書いていますが、フォント サイズに vw を使用するとうまくいきます。問題は vmax が webkit でまだサポートされていないことです。そのため、質問は次のようになります。

クライアント画面が狭いポートレート モード (iPhone 5 のポートレートなど) の場合に、フォントのレンダリング サイズを vw の使用から vh の使用に動的に切り替える方法はありますか?

ビューポートの最小幅を設定して「チート」しようとしましたが、うまくいかないようです。画面の実際の幅は常に優先されるようです。

サイトのコードを挿入すると、デバイスを横向きから縦向きに <\meta name="viewport" content="width=device-width"/> 、またはその逆に回転させた後、1 vw (ビューポート幅) が更新されません。たとえば、携帯電話の画面が 640x360 で、サイトを縦向きモードで開いた場合、1vw = 1/360px になりますが、回転すると静止していますが、1/640px である必要があります。Android 版 Firefox では、すべてが正しく表示されます。JavaScriptなしで動作させる方法はありますか？

デモ

この方法と同様の方法を使用して、任意のサイズでその比率を尊重する正方形 (または実際には任意の長方形) を作成することがあります。

私が欲しいもの：

• 高さの小さいデバイス、つまり横向きの携帯電話で正方形がビューポートの外に広がるのを防ぐため

提案された解決策

• を使用して、正方形の幅をビューポートの高さのパーセンテージに制限しますmax-width: 90vh
• 比率が尊重されることを期待する

CSS

HTML

何が起こるべきか

• 高さが小さいビューポートでは、正方形はビューポートの高さの 90% の最大幅にする必要があります

実際に何が起こるか:

• ビューポートの高さが正方形の幅より小さい場合 :
  • 幅はvh値ごとに制限されます
  • 高さは、制約されていない場合、正方形の幅から計算されますvh
  • 縦に長い長方形を取得します

仕様によると、相対値は「包含ブロック」から計算されます。これは、コンテナーの現在の幅であるように思われます。

ブラウザの動作:

• Chrome 29.0.1547.65: 説明どおり
• Firefox 23.01: 説明どおり
• Opera: vh をまったく尊重しませんOpera 16+ では検証されていません

仕様を間違って解釈していますか、それともブラウザ ベンダーによる実装のバグの可能性がありますか?

高さが変更されたときに縦横比で幅がスケーリングされ、常にブラウザーの高さの 100% であるサイトが必要です。

新しい vh ユニットを使用してこれを実現できます: http://jsbin.com/AmAZaDA/3 (ブラウザの高さのサイズ変更)

ただし、このユニットはサポートされていないため、IE8 と Safari のフォールバックが心配です。

この効果を実現するCSS のみの方法は他にありますか?

「スライド」コンテナーのビューポート サイズに依存する Web サイトがありますが、ウィンドウの高さの垂直方向のサイズ変更後に再計算されません。vh水平および混合スクロールは、正しい順序で再計算を強制します。vw水平方向のサイズ変更で正しく再計算されます。

それを修正するか、サイズ変更時に再レンダリングの再計算の js エンフォーサーを作成できますか?

Chrome 30、Mac OS X 10.9。