クロスブラウザ環境で vh および vw ユニットを使用するにはどうすればよいですか?

vh および vw 単位: JavaScript/jQuery によるクロスブラウザ実装

CSS3 では、ビューポートのパーセンテージの長さ単位 vh および vw が導入され、レスポンシブ レイアウトのための強力なツールが提供されます。 。ただし、ブラウザは、特にフォント サイズに関して、これらの単位を完全にはサポートしていません。

この制限に対処するために、JavaScript と jQuery は代替ソリューションを提供します。このようなソリューションの 1 つは、ウィンドウのサイズ変更イベントで vh 値と vw 値をピクセルに変換することです。

jQuery プラグイン

次の jQuery プラグインは、この変換タスクに取り組みます。

<code class="javascript">(function( $, window ){

  var $win = $(window)
    , _css = $.fn.css;

  function viewportToPixel( val ) {
    var percent = val.match(/[\d.]+/)[0] / 100
      , unit = val.match(/[vwh]+/)[0];
    return (unit == 'vh' ? $win.height() : $win.width()) * percent +'px';
  }

  function parseProps( props ) {
    var p, prop;
    for ( p in props ) {
      prop = props[ p ];
      if ( /[vwh]$/.test( prop ) ) {
        props[ p ] = viewportToPixel( prop );
      }
    }
    return props;
  }

  $.fn.css = function( props ) {
    var self = this
      , originalArguments = arguments
      , update = function() {
          if ( typeof props === 'string' || props instanceof String ) {
            if (originalArguments.length > 1) {
              var argumentsObject = {};
              argumentsObject[originalArguments[0]] = originalArguments[1];
              return _css.call(self, parseProps($.extend({}, argumentsObject)));
            } else {
              return _css.call( self, props );
            }
          } else {
            return _css.call( self, parseProps( $.extend( {}, props ) ) );
          }
        };
    $win.resize( update ).resize();
    return update();
  };

}( jQuery, window ));</code>

使用法

このプラグインを使用すると、次のように CSS で vh および vw ユニットを使用できます:

<code class="css">div {
   height: 50vh;
   width: 50vw;
   fontSize: 10vw;
}</code>

結論

vh および vw のネイティブ ブラウザ サポートは引き続き改善されています。 、この JavaScript/jQuery ソリューションは、クロスブラウザーの回避策を提供し、これらのユニットの力をレスポンシブ レイアウトに利用できるようにします。

以上がクロスブラウザ環境で vh および vw ユニットを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。