Orada vh ve vw birim iş yapmak için çapraz tarayıcı herhangi bir javascript.

SORU

19 Aralık 2012, ÇARŞAMBA

Orada vh ve vw birim iş yapmak için çapraz tarayıcı herhangi bir javascript.

Not: thisrastladım bu soruyu yazarak iken Tamam @media query kullanmayı öneriyor ama tekrar sormuşlar, " hangi soru 2011...

Bildiğiniz gibi CSS3 tanıttı yeni Viewport-percentage length units, vh vw, hangi hissediyorum gerçekten yararlı için sağlam bir duyarlı düzeni, yani benim soru, herhangi bir JavaScript/jQuery alternatif için bu? Daha fazla ayrı yazı tipi boyutları kullanma, boyutlandırma elemanları için kullanmak güvenli mi? Örnek gibi

div {
   height: 6vh;
   width: 20vh;  /* Note am using vh for both, do I need to use vw for width here? */
}

CEVAP

19 Aralık 2012, ÇARŞAMBA

Güncelleme 4:Duyarlı düzenleri için https://github.com/elclanrs/jquery.columns (eserlerinde) eklentisi

Bir (uzun) denemek verdim. Buraya ilk CSS örnek: http://jsbin.com/orajac/1/edit#css. (yeniden boyutlandırma çıkış paneli). font-size en son Krom görünüm penceresi birimleri ile çalışmıyor dikkat edin.

Ve burada jQuery ile bunu yapmak benim girişimi. Yazı tipi ile çalışan bir WordPress kullanmak demo http://jsbin.com/izosuy/1/edit#javascript. Sadece değerleri piksel dönüştürme olduğu için çoğu özelliği ile çalışmak gibi kapsamlı bir şekilde test etmedim ama window.resize eklenti çağırarak güncelleme tutar.

Güncelleme:Güncellenmiş kod birçok tarayıcı ile çalışmak. Eğer jsBin biraz window.resize ile garip davranıyor çünkü hiçbir şey Chrome dışında kullanıyorsanız yerel olarak Test edin.

Güncelleme 2:css yerel yöntem uzatın.

Güncelleme 3:Pencere kolu.entegrasyonu çok eklentinin içinde resize olayı şimdi sorunsuz.

Özü (yerel olarak test etmek için):https://gist.github.com/4341016

/*
 * CSS viewport units with jQuery
 * http://www.w3.org/TR/css3-values/#viewport-relative-lengths
 */
;(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
      , update = function() {
          return _css.call( self, parseProps( $.extend( {}, props ) ) );
        };
    $win.resize( update ).resize();
    return update();
  };

}( jQuery, window ));

// Usage:
$('div').css({
  height: '50vh',
  width: '50vw',
  marginTop: '25vh',
  marginLeft: '25vw',
  fontSize: '10vw'
});

Bunu Paylaş: