وحدات منفذ عرض CSS مع JavaScript

يقدم CSS3 وحدات طول النسبة المئوية لإطار العرض، vh وvw، والتي تعتبر ذات قيمة للتخطيطات سريعة الاستجابة. ومع ذلك، فإن السؤال الذي يطرح نفسه هو ما إذا كان هناك بديل جافا سكريبت عبر المتصفحات لهذه الوحدات.

بديل جافا سكريبت/مسج

بالتأكيد! يمكن الاستفادة من 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'
});

يدمج هذا الحل بسلاسة تحويل وحدة إطار العرض إلى طريقة CSS الخاصة بـ jQuery، مما يسمح بتغيير حجم العناصر بسهولة بناءً على أبعاد إطار العرض. **اعتبارات السلامة**