Comment pouvez-vous utiliser les unités vh et vw dans des environnements multi-navigateurs ?-tutoriel CSS-php.cn

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

DDD

Libérer： 2024-11-03 04:39:30

original

612 Les gens l'ont consulté

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

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>

Copier après la connexion

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>

Copier après la connexion

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!