Bagaimana Anda Boleh Menggunakan Unit vh dan vw dalam Persekitaran Penyemak Imbas Rentas?

Unit vh dan vw: Pelaksanaan Merentas Pelayar dengan JavaScript/jQuery

CSS3 memperkenalkan unit panjang peratusan Viewport, vh dan vw, menyediakan alat yang berkuasa untuk reka letak responsif . Walau bagaimanapun, penyemak imbas belum menyokong sepenuhnya unit ini, terutamanya apabila ia melibatkan saiz fon.

Untuk menangani had ini, JavaScript dan jQuery menawarkan penyelesaian alternatif. Satu penyelesaian sedemikian melibatkan penukaran nilai vh dan vw kepada piksel pada acara ubah saiz tetingkap.

Pemalam jQuery

Pemalam jQuery berikut menangani tugas penukaran ini:

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

Penggunaan

Dengan pemalam ini, anda boleh menggunakan unit vh dan vw dalam CSS anda seperti berikut:

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

Kesimpulan

Sementara sokongan pelayar asli untuk vh dan vw terus bertambah baik , penyelesaian JavaScript/jQuery ini menyediakan penyelesaian merentas penyemak imbas, membolehkan anda memanfaatkan kuasa unit ini untuk reka letak responsif anda.

Atas ialah kandungan terperinci Bagaimana Anda Boleh Menggunakan Unit vh dan vw dalam Persekitaran Penyemak Imbas Rentas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!