問題タブ [viewport-units]

ズーム レベルが 100% に設定されていない場合、デスクトップ IE10 は、フォント サイズがビューポート単位で設定されているテキストを正しくスケーリングしないようです。この影響を受ける IE のバージョン (およびおそらく他のブラウザー) を調べています。この例をブラウザで試して、結果を報告してください。

良い一日をお過ごしください。現在、ほとんどすべての測定値 (フォント サイズ、パディング、マージン、幅、高さなど) がビューポート ユニット vw および vh で作成されている Web サイトを開発しています。

これらの単位を使用するのは、ピクセル サイズとは異なり、さまざまな画面解像度でページを希望どおりに見せるのに最適だからです。

可能かどうか疑問に思っていたのは、ページが読み込まれた後、これらすべての測定値の非相対値を取得することです (たとえば、1vw と言って画面が 1000px の場合、非相対値は 10px にする必要があります)。私のcss3シートの相対値をそれらに置き換えます。これはばかげているように聞こえるかもしれませんが、これに関する私のポイントは、ユーザーがページをズームインおよびズームアウトできるようにし、実際にズームインまたはズームアウトできるようにすることです。現在、ユーザーがどのようなズームを行っても、繰り返しの画像を除いてページは同じままです。

私のJavaの起源により、HTMLのクライアント側スクリプトについて最もよく知っている言語であるため、これをjavascriptで実行したいと思います。

あるいは、ズームイン時に相対値を単純に無視する、私が知らない機能があるのでしょうか? もしそうなら、私に知らせてください。

新しい珍しい CSS ユニットについて知りました。vhビューポートの高さとvw幅の割合をそれぞれ測定します。

Stack Overflow からこの質問を見ましたが、ユニットがさらに似たものになりました。

vw および vh ユニットの仕組み

答えは具体的に言う

vw と vh は、それぞれウィンドウの幅と高さのパーセンテージです。100vw は幅の 100%、80vw は 80% などです。

%これは、より一般的なユニットとまったく同じように見えます。

開発者ツールで、値を vw/vh から % に、またはその逆に変更しようとしましたが、同じ結果が得られました。

両者に違いはありますか？そうでない場合、なぜこれらの新しいユニットが に導入されたのCSS3ですか?

そこで、svg ファイルが含まれるページのイントロを作成しました。1 つは図に色付けされ、もう 1 つは輪郭だけが描かれています。Figure にはオーバーフローが隠され、幅を広げるアニメーションがあります。このようなもの：

IE を除くすべてのブラウザで見栄えがよく、すべてのコンテナの幅で遊んでいますが、適合させてレスポンシブにすることができませんでした。何か案が ？

( jsFiddle )

私はこの問題に直面していますAndroid上のChromeでは、同じデバイス上の他のブラウザで動作しました:

問題は、高さを 100% に設定すると、ネストされた DIV がその親 (高さは 100vh) を埋めないことです。

Chrome バージョンでテストしました: 26.0.1410.58 および 30.0.0.0。

:(