윈도우 창 크기가 변할 때 다른 작업하는 방법 - .resize()

.resize()

.resize()는 윈도우 크기가 바뀔 때 어떤 작업을 할 수 있게 합니다.

 

기본형

$( window ).resize( function() {
  // do somthing
});

 

예제

웹브라우저의 크기를 변경할 때, p 요소의 가로폭을 출력합니다. 윈도우 크기를 변경하면 숫자가 바뀝니다.

<p></p>

p {
  width: 80%;
  margin: auto;
  padding: 20px;
  text-align: center;
  border: 1px solid #bcbcbc;
}

$( document ).ready( function() {
  var Width = $( 'p' ).width();
  $( 'p' ).append( Width );
  $( window ).resize( function() {
    Width = $( 'p' ).width();
    $( 'p' ).empty().append( Width );
  });
});