問題タブ [viewport-units]

一部のコードは、ビューポートに基づいてフォント サイズを調整します。体に最小幅があるのと同じくらい私はそうです。この最小幅を超えると、テキストのビューポート スケーリングがどのように停止されるでしょうか。

min-font-size のキングが必要か、フォント サイズを親要素のサイズにマップする必要があります。これはJSなしで行うことができますか？

したがって、ギャラリー用に等間隔の要素を作成する必要がありますが、明らかに 1vw =/= 2 * 0.5vw

ギャラリー コンテナは 80vw なので、4 つの div を均等に配置したい場合は、80/4=20、20-1=19、1/2=0.5 となります。なぜこんなに変な表示になるのか理解できません。

編集:私の質問は、それを本来の方法で動作させる方法です

vhサイズのみを使用してログインフォームを作成しようとしました。これを行うと、全体として、フォームがビューポートに応じてスケーリングされることが期待されます。

そうではありません！何らかの理由でズームインすると、入力フィールドと下のテキストの間に、ズームするほど大きくなる空白スペースが作成されます。

http://jsfiddle.net/TnY3L/

フィドルはあまりよくできていません。私のプロジェクトからコピーしただけです。しかし、何が問題なのかはわかります。それこそが重要なのです。

これを修正する方法について誰か考えがありますか?

画面の1/5 の div がvhあります。そのdiv内の画像を垂直方向に中央揃えにしたい。水平方向に中央揃えすることはできますが、これまでに次のコードを試しました:

http://jsfiddle.net/ws91188y/1/

だから私は最近、CSS3 内でvhandユニットを使用しており、それらの機能が気に入っています。vw残念ながら、それらはブラウザの最新バージョンでしかサポートされていないため、自分のサイトに必要な外観を得るために回避策を見つける必要がありました.

調査の結果、JQuery で作成された別のスレッドで修正が見つかりました。これは、ビューポートのサイズが変更されるまで (つまり、ウィンドウのサイズが変更されるか、モバイル デバイスの向きが逆になるまで) 完全に機能します。 ）これを行うと、divの高さがページの下に大幅に増加します。この問題を解決するのを手伝ってくれたら、とても感謝しています。

私が取り組んでいるサイトは次のとおりです: http://phantommarketing.co.uk/rapidengineering/index.html

インラインJavascriptを有効にした患部のHTML

Javascript

この CSS により、ビューポートの正確な (100%) 寸法が得られるはずです。しかし、ページでオーバーフローが発生しているため、明らかに大きすぎます。

すべて削除したので、パディング、マージン、またはアウトラインではありません。

また、これらの寸法で 2 つのdivを追加すると、投影された寸法よりも大きくなるだけのようです。（しかし、jsfiddleでは常にそうです）

http://jsfiddle.net/0psu7ys6/

私はそれをバグと考えて回避策を書くべきですか？または、何か不足していますか？

だから私は2つのdivを持っheight:50vminていborder-bottom:50vmin solid #000ます。現在、これらは同じ「サイズ」である必要がありますが、50% の確率でこれら 2 つの間にわずかな違いがあり、一方が 320px で他方が 320.500px です。(問題は主に、最大化またはサイズ変更をすばやく行った後に発生します)

ここで一貫したレスポンシブサイズを取得する方法についてのアイデアはありますか?

CODEPEN
http://codepen.io/LiamMartens/pen/bddrRB

css-values viewport-relative-lengthsを適切に使用する方法に従って? 、次の方法でビューポート単位を使用して、大きなモニターで小さなページを自動的に拡大しようとしました:

ただし、Google Chrome でテストすると、ズーム機能がほとんど機能しなくなりました。

ズームが上記のコードですぐに動作を停止するのはChromeのバグ/機能ですか、それとも設計と仕様によるものですか?