Heim > Web-Frontend > CSS-Tutorial > Wie können Sie vh- und vw-Einheiten in browserübergreifenden Umgebungen verwenden?

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

DDD
Freigeben: 2024-11-03 04:39:30
Original
610 Leute haben es durchsucht

How Can You Use vh and vw Units in Cross-Browser Environments?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage