> 웹 프론트엔드 > CSS 튜토리얼 > 크로스 브라우저 환경에서 vh 및 vw 단위를 어떻게 사용할 수 있습니까?

크로스 브라우저 환경에서 vh 및 vw 단위를 어떻게 사용할 수 있습니까?

DDD
풀어 주다: 2024-11-03 04:39:30
원래의
611명이 탐색했습니다.

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

vh 및 vw 단위: JavaScript/jQuery를 사용한 브라우저 간 구현

CSS3은 반응형 레이아웃을 위한 강력한 도구를 제공하는 뷰포트 백분율 길이 단위인 vh 및 vw를 도입했습니다. . 그러나 브라우저는 특히 글꼴 크기와 관련하여 이러한 단위를 완전히 지원하지 않습니다.

이러한 제한을 해결하기 위해 JavaScript와 jQuery는 대체 솔루션을 제공합니다. 그러한 해결 방법 중 하나는 창 크기 조정 이벤트에서 vh 및 vw 값을 픽셀로 변환하는 것입니다.

jQuery 플러그인

다음 jQuery 플러그인은 이 변환 작업을 처리합니다.

<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>
로그인 후 복사

사용법

이 플러그인을 사용하면 다음과 같이 CSS에서 vh 및 vw 단위를 사용할 수 있습니다.

<code class="css">div {
   height: 50vh;
   width: 50vw;
   fontSize: 10vw;
}</code>
로그인 후 복사

결론

vh 및 vw에 대한 기본 브라우저 지원은 계속해서 개선되고 있습니다. , 이 JavaScript/jQuery 솔루션은 브라우저 간 해결 방법을 제공하므로 반응형 레이아웃에 이러한 단위의 기능을 활용할 수 있습니다.

위 내용은 크로스 브라우저 환경에서 vh 및 vw 단위를 어떻게 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿