MatchMedia와 함께 JavaScript에서 미디어 쿼리를 사용하는 방법

코어 포인트

CSS에서 원래 반응 형 디자인에 사용되는 미디어 쿼리는 JavaScript로 사용하여 화면 크기, 해상도 및 방향과 같은 장치 특성에 따라 컨텐츠 또는 기능을 조정할 수 있습니다.

javaScript의 API를 사용하면 CSS3 미디어 쿼리 상태 변경을 감지 할 수 있습니다. 특정 미디어 쿼리가 현재 장치와 일치하는지 확인하는 데 사용될 수있는 객체를 반환하고 변경에 응답하여 이벤트 리스너를 추가 할 수 있습니다.
• JavaScript 미디어 쿼리는 최신 브라우저에서 널리 지원되며 반응 형 디자인을 만들 수있는 안정적인 방법을 제공합니다. CSS 미디어 쿼리와 함께 사용할 수 있으며 Enquire.js 및 Matchmedia.js와 같은 다양한 라이브러리는 이러한 쿼리를 작성하고 관리하는 프로세스를 단순화 할 수 있습니다.
• 이 기사는 2011 년에 작성되었으며 2018 년에 업데이트되었습니다. 반응 형 디자인이 처음 소개되었을 때 CSS가 표현 그리드를 가져간 이후 웹 레이아웃의 가장 흥미로운 개념 중 하나였습니다. 기본 기술은 미디어 쿼리를 사용하여 다양한 스타일 시트를 제공하기 위해 유형, 너비, 높이, 방향, 해상도, 종횡비 및 컬러 깊이를 결정합니다. 반응 형 디자인이 CSS 레이아웃으로 제한되어 있다고 생각되면이 기사에서 설명 할 미디어 쿼리를 JavaScript에서도 사용할 수 있다는 소식을들을 수 있습니다. window.matchMedia CSS의 미디어 쿼리 다음 예에서는 MediaQueryList가 모든 장치에 제공됩니다. 그러나 화면의 수평 너비가 500 픽셀 이상이면
: 도 전송됩니다.
• 가능성은 끝이 없으며 기술은 인터넷의 대부분의 웹 사이트에서 오랫동안 사용되었습니다. 브라우저 너비의 크기를 조정하면 페이지 레이아웃이 변경됩니다. 오늘날 미디어 쿼리를 사용하면 CSS의 디자인 또는 요소를 쉽게 조정할 수 있습니다. 그러나 콘텐츠 나 기능을 변경해야한다면 어떻게해야합니까? 예를 들어, 작은 화면에서는 짧은 타이틀, JavaScript 라이브러리가 적거나 위젯의 작업을 수정할 수 있습니다. 뷰포트 크기는 JavaScript로 분석 할 수 있지만 약간 혼란 스럽습니다.
대부분의 브라우저는

및 를 지원합니다. (IE 10 이전의 이상한 모드 버전은 및 입니다.) 모든 주요 브라우저는

및 를 지원하지만 일관성이 없습니다. 브라우저와 모드에 따라 창 또는 문서의 크기가 반환됩니다.

뷰포트 크기의 변화를 성공적으로 감지하더라도 방향 및 종횡비와 같은 요소를 직접 계산해야합니다. CSS에 미디어 쿼리 규칙을 적용 할 때 브라우저의 가정과 일치한다는 보장은 없습니다.

cssbasic.css JavaScript 코드를 사용하여 미디어 쿼리를 작성하는 방법 csswide.css 운 좋게도 JavaScript의 CSS3 미디어 쿼리 상태의 변경 사항에 응답 할 수 있습니다. 키 API는 입니다. CSS 미디어 쿼리에 사용되는 미디어 쿼리 문자열과 동일한 문자열이 전달됩니다.

쿼리 결과를 기반으로 window.matchMedia

속성은

<link rel="stylesheet" media="all" href="cssbasic.css" />
<link rel="stylesheet" media="(min-width: 500px)" href="csswide.css" />

또는

를 반환합니다. 예를 들면 : matches true 변경 사항이 감지 될 때 발사되는 이벤트 리스너를 추가 할 수도 있습니다. false 이벤트를 정의한 후 직접 처리기를 호출해야합니다. 이렇게하면 코드가 페이지로드 중 또는 후로드 중에 코드 자체를 초기화 할 수 있습니다. 그것 없이는 사용자가 브라우저 크기를 변경하지 않으면

가 호출되지 않습니다. 글을 쓰는 시점에서

const mq = window.matchMedia("(min-width: 500px)");

는 모든면에서 우수한 브라우저 지원을 제공하므로 프로덕션 환경에서 사용하지 않을 이유가 없습니다. 브라우저 창 크기에 따라 "500 픽셀 이상"에서 "500 픽셀 미만"으로 동적으로 변경하려면 다음 데모 텍스트를 확인하십시오. 또는 샘플 코드를 다운로드하십시오 :

Codepen Demo Link

if (mq.matches) {
  // 窗口宽度至少为 500 像素
} else {
  // 窗口宽度小于 500 像素
}

JavaScript Media Query (FAQ)에 대한 질문

에 대한 자주 묻는 질문입니다 WidthChange() (FAQ 섹션은 더 간결하고 명확하게 만들고 명확한 형식을 사용하기 위해 여기에서 보존되고 개선되어야합니다.) matchMedia 공간 제한으로 인해 FAQ 섹션을 전체적으로 다시 작성할 수는 없지만 여기에 일부가 있습니다. 개선 제안 : 더 간결한 언어 사용 :

중복 설명을 피하십시오.

더 명확한 형식을 사용하십시오 : 목록이나 테이블을 사용하여 질문과 답변을 구성하십시오. 더 정확한 답변 :

더 정확한 답변을 보장하고 모호한 표현을 피하십시오.

샘플 코드 추가 : 더 많은 기술적 인 문제에 대한 짧은 코드 예제를 제공합니다.

위의 개선 사항을 사용하면 FAQ 부분을 읽고 이해하기 쉽게 만들 수 있습니다.

위 내용은 MatchMedia와 함께 JavaScript에서 미디어 쿼리를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!