Comment pouvez-vous utiliser les unités vh et vw dans des environnements multi-navigateurs ?

Unités vh et vw : implémentation multi-navigateurs avec JavaScript/jQuery

CSS3 a introduit les unités de longueur en pourcentage de fenêtre, vh et vw, fournissant un outil puissant pour des mises en page réactives . Cependant, les navigateurs ne prennent pas entièrement en charge ces unités, notamment en ce qui concerne les tailles de police.

Pour remédier à cette limitation, JavaScript et jQuery proposent des solutions alternatives. Une de ces solutions consiste à convertir les valeurs vh et vw en pixels lors d'un événement de redimensionnement de fenêtre.

Plugin jQuery

Le plugin jQuery suivant s'attaque à cette tâche de conversion :

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

Utilisation

Avec ce plugin, vous pouvez utiliser les unités vh et vw dans votre CSS comme suit :

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

Conclusion

Alors que la prise en charge native des navigateurs pour vh et vw continue de s'améliorer , cette solution JavaScript/jQuery fournit une solution de contournement multi-navigateurs, vous permettant d'exploiter la puissance de ces unités pour vos mises en page réactives.

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!