ホームページ  >  記事  >  ウェブフロントエンド  >  CSS の vw との互換性の問題はありますか?

CSS の vw との互換性の問題はありますか?

WBOY
WBOYオリジナル
2022-04-27 18:05:443506ブラウズ

CSS には vw との互換性の問題があります。 vw の互換性: 1. デスクトップ PC では、vw は Chrome 26、Firefox 19、Safari 6.1、IE10、および Opera 15 以降と互換性があります; 2. モバイル デバイスでは、vw は Android 4.4 および iOS 8 以降と互換性があります。

CSS の vw との互換性の問題はありますか?

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css の vw との互換性の問題はありますか

デスクトップ PC

Chrome: バージョン 26 (2013 年 2 月) 以降完全にサポートされています

Firefox: バージョン 19 (2013 年 1 月) 以降完全にサポート

Safari: バージョン 6.1 (2013 年 10 月) 以降完全にサポート

Opera: 15 以降 バージョン 1 (2013 年 7 月) 以降完全にサポート

IE: IE10 (Edge を含む) 以降、まだ部分的にのみサポートされています (vmax はサポートされておらず、vm が vmin に置き換わります)

#mobiledevices

Android: バージョン 4.4 (2013 年 12 月) から完全にサポート

iOS: iOS8 バージョン (2014 年 9 月) から完全にサポート。

拡張知識:

(1) vw、vh、vmin、vmax はウィンドウ単位および相対単位です。これは、ページの親ノードまたはルート ノードに対して相対的なものではありません。ビューポートのサイズによって決まり、単位は 1、つまり 1% 程度です。

ビューポートは、ブラウザが実際にコンテンツを表示する領域です。つまり、ツールバーやボタンのない Web ブラウザです。

(2) 具体的な記述は以下のとおりです。

  • vw: ウィンドウ幅のパーセンテージ (1vw はウィンドウの幅を 1% として表します)

  • vh: ウィンドウの高さのパーセンテージ

  • vmin: 現在の vw と vh の小さい方

  • # #vmax: 現在の vw と vh の大きい値

vw、vh と % の違い

(1) % は親要素に対する相対的なサイズ 設定された比率 vw と vh はウィンドウ サイズによって決まります。

(2) vw や vh の利点は高さを直接取得できることですが、% を使用すると本体の高さを設定しないと表示領域の高さを正確に取得できないため、この点が利点です。

(学習ビデオ共有:

css ビデオ チュートリアル)

以上がCSS の vw との互換性の問題はありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。