Heim > Web-Frontend > CSS-Tutorial > Gibt es eine browserübergreifende JavaScript-Alternative zu CSS-Ansichtsfenstereinheiten (vh und vw)?

Gibt es eine browserübergreifende JavaScript-Alternative zu CSS-Ansichtsfenstereinheiten (vh und vw)?

Mary-Kate Olsen
Freigeben: 2024-11-02 18:40:03
Original
969 Leute haben es durchsucht

Is there a cross-browser JavaScript alternative to CSS viewport units (vh and vw)?

CSS-Ansichtsfenstereinheiten mit JavaScript

CSS3 führt die prozentualen Längeneinheiten des Ansichtsfensters ein, vh und vw, die für responsive Layouts wertvoll sind. Allerdings stellt sich die Frage, ob es für diese Einheiten eine browserübergreifende JavaScript-Alternative gibt.

JavaScript/jQuery-Alternative

Absolut! jQuery kann genutzt werden, um eine Alternative für Ansichtsfenstereinheiten bereitzustellen. Hier ist eine jQuery-basierte Lösung:

<code class="javascript">/* jQuery plugin to convert viewport units to pixels */
;(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 ));

**Usage:**
</code>
Nach dem Login kopieren

$('div').css({
height: '50vh',
width: '50vw',
marginTop: ' 25vh',
marginLeft: '25vw',
fontSize: '10vw'
});

This solution seamlessly integrates the viewport unit conversion into jQuery's CSS method, allowing for easy resizing of elements based on viewport dimensions.

**Safety Considerations**
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonGibt es eine browserübergreifende JavaScript-Alternative zu CSS-Ansichtsfenstereinheiten (vh und vw)?. 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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage