जावास्क्रिप्ट के साथ सीएसएस व्यूपोर्ट इकाइयां

CSS3 व्यूपोर्ट-प्रतिशत लंबाई इकाइयां, वीएच और वीडब्ल्यू पेश करता है, जो उत्तरदायी लेआउट के लिए मूल्यवान हैं। हालाँकि, यह सवाल उठता है कि क्या इन इकाइयों के लिए एक क्रॉस-ब्राउज़र जावास्क्रिप्ट विकल्प मौजूद है।

JavaScript/jQuery वैकल्पिक

बिल्कुल! व्यूपोर्ट इकाइयों के लिए एक विकल्प प्रदान करने के लिए jQuery का लाभ उठाया जा सकता है। यहां एक jQuery-आधारित समाधान है:

/* 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:**

$('div').css({
ऊंचाई: '50vh',
चौड़ाई: '50vw',
मार्जिनटॉप: '25vh',
मार्जिनलेफ्ट: '25vw ',
फ़ॉन्टआकार: '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**