Wie können Sie vh- und vw-Einheiten in browserübergreifenden Umgebungen verwenden?

vh- und vw-Einheiten: Cross-Browser-Implementierung mit JavaScript/jQuery

CSS3 führte die prozentualen Längeneinheiten des Viewports, vh und vw, ein und stellt ein leistungsstarkes Tool für responsive Layouts bereit . Browser unterstützen diese Einheiten jedoch nicht vollständig, insbesondere wenn es um Schriftgrößen geht.

Um diese Einschränkung zu beheben, bieten JavaScript und jQuery alternative Lösungen. Eine solche Lösung beinhaltet die Konvertierung von vh- und vw-Werten in Pixel bei einem Fenstergrößenänderungsereignis.

jQuery-Plugin

Das folgende jQuery-Plugin übernimmt diese Konvertierungsaufgabe:

<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>

Verwendung

Mit diesem Plugin können Sie vh- und vw-Einheiten in Ihrem CSS wie folgt verwenden:

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

Fazit

Während sich die native Browserunterstützung für vh und vw weiter verbessert Diese JavaScript/jQuery-Lösung bietet eine browserübergreifende Problemumgehung, sodass Sie die Leistungsfähigkeit dieser Einheiten für Ihre responsiven Layouts nutzen können.

Das obige ist der detaillierte Inhalt vonWie können Sie vh- und vw-Einheiten in browserübergreifenden Umgebungen verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!