問題タブ [viewport-units]

私は実際に3週間以来解決しようとしている問題を抱えています。vw ユニットのサポートをテストし、ブラウザーがユニットをサポートしていない場合は別のスタイルシートを提供しようとしています。modernizr チュートリアルを読み、modernizr css 検出に精通していますが、vh ユニット (ビューポート相対ユニット) のテストはネットで見つけられなかったものです。 .

だから基本的に：

シナリオ 1: ブラウザーは vw ユニットをサポートし、スタイルシート A を提供します。

シナリオ 2: ブラウザーがサポートしていないため、スタイルシート B を提供します。

Modernizr.cssvwunit と呼ばれるコア以外の検出があることはわかりましたが、正直なところ、このコンテキストでどこから始めてどのように使用すればよいかわかりません。

私の知識を広げるのを手伝ってくれたら、それは素晴らしいことです。また、あまりにも面倒でなければ、私が勉強できる例のjsfiddleは非常に役に立ちます。

心から、

マーカス

編集:なぜelseステートメントだけを起動するのですか? http://jsfiddle.net/5saCL/10

だから私はdivを持っているとしましょう.width: 7vh; height: 7vh; background: black;それは別のdivの中にありbackground: orange; height: 7vh; width: 100%;ます. アニメーションを持っていますが、それは中心を外すことになっています。現在、私はleft: 50%内側の div で使用していますが、明らかにセンタリングに近いですが、実際にはそうではありません。margin: 0 auto;またはmargin-left: auto; margin-right: auto;アニメーション化しないでください。それで、私は何をしますか？私の唯一の解決策はJSで距離を計算することですか?

JsFiddle http://jsfiddle.net/8e7dk/

この例はそれを中心に置いていません。left: 50%;

ヘッダーのすぐ下にスライドショーがある Web サイトで作業しています。スライドショーの高さをレスポンシブに制限して、1 つの画面解像度でビューポートの 20 ～ 30% を残すと、他の画面解像度でも同じことが行われるようにします。現在、私のCSSは次のようになっています。

画像はレスポンシブにスケーリングされ、ビューポート ユニットを使用して目的を達成しています。ただし、ビューポート ユニットはブラウザー間の互換性があまり高くないため、すべてのブラウザーで同じアイデアを実現する方法を探しています。JavaScript や jQuery ではなく、CSS のみを使用することをお勧めします。

http://caniuse.com/viewport-unitsによると、現在のバージョンの Safari はビューポート ユニティを完全にサポートする必要があります。それでも、以下のコードを使用すると:

Safari はそれを認識せず、デフォルトで設定されますtop: 0(iOS Safari でも同じです)。この特定の例では、私が推測するパーセンテージを使用できましたが、Safari のためだけに jQuery を追加することを余儀なくされた他の例があり、それは私が醜いと思うものです。

caniuse.comがビューポートユニットを完全にサポートしていると言っているにもかかわらず、SafariがPCとiPhoneの上記を理解しないのはなぜですか? 場合によってはjavascriptが唯一の代替手段ですか?

vhとの値を計算する方法を知りたいですvw。私は2vw自分のテキストを使用して完全に機能するウェブサイトを設計しています。しかし、私は推測しただけです。将来使用できるように、これらのユニットがどのように機能するか教えてください。また、クロスブラウザがサポートされているかどうかも知りたいです。