Existe-t-il une alternative JavaScript multi-navigateurs aux unités de fenêtre CSS (vh et vw) ?

Unités de fenêtre CSS avec JavaScript

CSS3 introduit les unités de longueur de pourcentage de fenêtre, vh et vw, qui sont utiles pour les mises en page réactives. Cependant, la question se pose de savoir s'il existe une alternative JavaScript multi-navigateurs pour ces unités.

Alternative JavaScript/jQuery

Absolument ! jQuery peut être exploité pour fournir une alternative aux unités de fenêtre. Voici une solution basée sur jQuery :

<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({
hauteur : '50vh',
largeur : '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**

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!