JavaScript 미디어 쿼리 작업

JavaScript 미디어 쿼리 : 너머로 창 크기 조정

미디어 쿼리를 생각할 때 어떤 염두에두고 있습니까? 아마도 CSS는 다음과 같은 규칙입니다.

 몸 {
  배경색 : 매실;
}

@Media (min-width : 768px) {
  몸 {
    배경색 : 토마토;
  }
}

CSS 미디어 쿼리는 반응 형 디자인의 기본이며 뷰포트 크기, 장치 유형, 선호도 (색 구성표, 모션) 등을 기반으로 스타일을 적용합니다. 그러나 JavaScript는 또한 미디어 쿼리 기능을 제공하며, 종종 화면 조건에 따라 반응 형 플러그인을 만들거나 요소를 동적으로 조정하는 데 유용합니다.

CSS와 달리 JavaScript의 미디어 쿼리 처리는 다릅니다. 핵심 개념은 동일하게 유지됩니다 : 일치 조건 및 작업 적용.

matchMedia() 사용

matchMedia() 메소드는 미디어 쿼리가 현재 문서 상태와 일치하는지 여부를 결정합니다. CSS 객체 모델보기 모듈 작업 초안에도 불구하고 브라우저 지원이 우수합니다.

사용법은 CSS를 반영합니다 : 미디어 쿼리 문자열을 matchMedia() 로 전달하고 .matches 속성을 확인하십시오.

 // 쿼리를 정의합니다
const mediaquery = window.matchmedia ( '(min-width : 768px)');

matchMedia() MediaQueryList 객체를 반환합니다. .matches 속성 (읽기 전용 부울)은 문서가 쿼리와 일치하는지 여부를 나타냅니다.

 // Viewports의 미디어 조건 생성 너비는 768px입니다.
const mediaquery = window.matchmedia ( '(min-width : 768px)');
// 미디어 쿼리가 일치하는지 확인하십시오
if (mediaquery.matches) {
  // 작업을 트리거합니다
  경고 ( '미디어 쿼리 일치!');
}

이것은 단일 수표를 처리합니다. 지속적인 모니터링을 위해서는 이벤트 리스너가 필요합니다.

변화를 듣습니다

MediaQueryList Media 쿼리 상태가 변경 될 때 트리거 된 콜백 함수 ( .onchange event)를 등록하기 위해 addListener() (및 removeListener() )를 제공합니다. 이를 통해 업데이트 된 조건에 대한 반응 형 조치가 가능합니다.

 // Viewports의 조건을 최소 768px 너비로 만듭니다.
const mediaquery = window.matchmedia ( '(min-width : 768px)');

함수 handletableTchange (e) {
  // 미디어 쿼리가 일치하는지 확인하십시오
  if (e.matches) {
    // 작업을 수행합니다
    Console.log ( '미디어 쿼리 일치!');
  } 또 다른 {
    Console.log ( '미디어 쿼리 타의 추종을 불허합니다!');
  }
}

// 등록 이벤트 리스너
mediaquery.addlistener (handletabletchange);

// 초기 확인
HandletableTchange (MediaQuery);

addListener() 즉시 발사되지 않습니다. MediaQueryList 객체와 함께 핸들러를 수동으로 인수로 호출해야합니다.

"오래된"접근법

비교를 위해 이전 메소드는 window.innerWidth 또는 window.innerHeight 가있는 resize 이벤트 리스너를 사용합니다. 이것은 덜 효율적이고 다재다능합니다.

 함수 checkmediaQuery () {
  // 창 내부 너비가 768px보다 큰지 확인
  if (window.innerWidth> 768) {
    // 작업을 수행합니다
    Console.log ( '미디어 쿼리 일치!');
  }
}

// 창 크기 조정 이벤트에 리스너를 추가합니다
window.addeventListener ( 'Resize', CheckMediaQuery);

이는 더 강력한 matchMedia() 접근 방식과 달리 성능 집약적이며 뷰포트 크기 확인으로 제한됩니다.

결론

matchMedia() 및 MediaQueryList 강력한 JavaScript Media 쿼리 처리를 제공하여 일회성 및 연속 확인을 통해 간단한 뷰포트 크기를 넘어 다양한 조건의 변경에 반응합니다. 구형 resize 이벤트 리스너는 여전히 기능적이지만 덜 효율적이며 기능이 덜 풍부합니다. matchMedia() 의 유연성은 현대적인 반응 형 JavaScript 개발에 선호되는 방법입니다.

다음은 기존 방법으로 조경 방향을 감지 할 수없는 기능을 보여주는 예입니다. 이것은 HTML5 게임 개발에 자주 사용됩니다.

위 내용은 JavaScript 미디어 쿼리 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!