Gibt es eine browserübergreifende JavaScript-Alternative zu CSS-Ansichtsfenstereinheiten (vh und 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>

$('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**

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!