미디어 쿼리를 생각할 때 가장 먼저 떠오르는 것은 무엇입니까? CSS 파일에 다음과 같은 내용이 있을 수 있습니다.

body {

  background-color: plum;

}

@media (min-width: 768px) {

  body {

    background-color: tomato;

  }

}

CSS 미디어 쿼리는 반응형 디자인의 핵심 요소입니다. 뷰포트 크기, 동작 선호도, 선호하는 색 구성표, 특정 상호 작용, 심지어 프린터, TV, 프로젝터와 같은 특정 장치 등 다양한 상황에 다양한 스타일을 적용 할 수 있는 좋은 방법입니다.

하지만 JavaScript에 대한 미디어 쿼리도 있다는 것을 알고 계셨습니까? 사실이에요! JavaScript에서 자주 볼 수는 없지만 슬라이더와 같은 반응형 플러그인을 만드는 데 수년 동안 도움이 된 사용 사례가 있습니다. 예를 들어, 특정 해상도에서 슬라이더 항목을 다시 그리고 다시 계산해야 할 수 있습니다.

JavaScript에서 미디어 쿼리로 작업하는 것은 개념이 비슷하더라도 CSS에서 작업하는 것과 매우 다릅니다. 일부 조건을 일치 시키고 일부 항목을 적용합니다.

matchMedia() 사용 

문서가 JavaScript의 미디어 쿼리 문자열과 일치하는지 확인하기 위해 matchMedia() 메서드를 사용합니다. 공식적으로는 Working Draft 상태에 있는 CSS Object Model View Module 사양의 일부이지만,이를 위한 브라우저 지원은 98.6 %의 전 세계 범위를 가진 Internet Explorer 10까지 거슬러 올라갑니다.

사용법은 CSS 미디어 쿼리와 거의 동일합니다. 미디어 쿼리 문자열을 matchMedia()에 전달한 다음 .matches 속성을 확인합니다.

// Define the query

const mediaQuery = window.matchMedia('(min-width: 768px)')

정의 된 미디어 쿼리는 MediaQueryList 개체를 반환합니다. 미디어 쿼리에 대한 정보를 저장하는 객체이며 필요한 키 속성은 .matches입니다. 문서가 미디어 쿼리와 일치하면 true를 반환하는 읽기 전용 부울 속성입니다.

// Create a media condition that targets viewports at least 768px wide

const mediaQuery = window.matchMedia('(min-width: 768px)')

// Check if the media query is true

if (mediaQuery.matches) {

  // Then trigger an alert

  alert('Media Query Matched!')

}

이것이 자바 스크립트에서 미디어 조건을 일치시키기 위한 기본 사용법입니다. 객체 (MediaQueryList)를 반환하는 일치 조건 (matchMedia())을 만들고, 객체 (.matches)에 대해 확인한 다음 조건이 true로 평가되면 작업을 수행합니다. CSS와 완전히 다르지 않습니다!

하지만 더 많은 것이 있습니다. 예를 들어, 대상 창 크기 아래로 창 크기를 변경 한 경우 상자에서 바로 CSS로 업데이트 되는 방식은 없습니다. .matches는 일회성 즉각적인 확인에 적합하지만 변경 사항을 지속적으로 확인할 수 없기 때문입니다. 즉, 우리는 ...

Listen for changes 

MediaQueryList에는 미디어 쿼리 상태가 변경 될 때 호출되는 콜백 함수 (.onchange 이벤트로 표시됨)를 허용하는 addListener() (및 후속 removeListener()) 메서드가 있습니다. 즉, 조건이 변경되면 추가 기능을 실행하여 업데이트 된 조건에 "응답"할 수 있습니다.

// Create a condition that targets viewports at least 768px wide

const mediaQuery = window.matchMedia('(min-width: 768px)')

function handleTabletChange(e) {

  // Check if the media query is true

  if (e.matches) {

    // Then log the following message to the console

    console.log('Media Query Matched!')

  }

}

// Register event listener

mediaQuery.addListener(handleTabletChange)

// Initial check

handleTabletChange(mediaQuery)

matchMedia()와 MediaQueryList의 원투 펀치는 CSS가 제공하는 미디어 조건을 일치 시킬 뿐만 아니라 업데이트 된 조건에도 적극적으로 대응할 수 있는 동일한 기능을 제공합니다.

addListener()로 이벤트 리스너를 등록하면 처음에 실행되지 않습니다. 이벤트 핸들러 함수를 수동으로 호출하고 미디어 쿼리를 인수로 전달해야 합니다.

https://codepen.io/rema/pen/QWNpVjV 

일을 하는 오래된 방식 

문맥 상 약간의 향수를 불러 일으키기 위해 JavaScript에서 "미디어 쿼리"를 수행하는 오래되었지만 여전히 인기 있는 방법을 다루고 싶습니다 (여기서는 그 인용문이 중요합니다). 가장 일반적인 방법은 window.innerWidth 또는 window.innerHeight를 확인하는 크기 조정 이벤트 리스너를 바인딩하는 것입니다.

여전히 야생에서 다음과 같은 것을 볼 수 있습니다.

function checkMediaQuery() {

  // If the inner width of the window is greater then 768px

  if (window.innerWidth > 768) {

    // Then log this message to the console

    console.log('Media Query Matched!')

  }

}

// Add a listener for when the window resizes

window.addEventListener('resize', checkMediaQuery);

크기 조정 이벤트는 각 브라우저 크기 조정에서 호출되므로 비용이 많이 드는 작업입니다! 빈 페이지의 성능 영향을 살펴보면 차이를 알 수 있습니다.

차이점을 확인하는 더 간단한 방법은 콘솔 로그를 사용하는 것입니다.

성능 문제를 살펴 보더라도 크기 조정은 인쇄 및 방향과 같은 고급 미디어 쿼리를 작성할 수 없다는 점에서 제한적입니다. 따라서 뷰포트 너비를 일치 시켜 '미디어 쿼리'동작을 모방하지만 다른 많은 항목을 일치 시킬 수 없으며 실제 미디어 쿼리가 훨씬 더 많은 기능을 수행 할 수 있다는 것을 알고 있습니다.

결론 

자바 스크립트의 미디어 쿼리를 살펴 보겠습니다! matchMedia()를 사용하여 미디어 조건을 정의하는 방법을 탐색하고 변경 (.onchange)에 응답 할 수 있도록 해당 조건에 대해 일회성 (.matches) 및 영구 (addListener()) 검사를 수행 할 수있는 MediaQueryList 객체를 조사했습니다. 함수를 호출하여.

또한 창에서 크기 조정 이벤트를 수신하여 작업을 수행하는 "오래된"방식을 보았습니다. window.innerWidth의 크기 변경에 대응하기 위해 여전히 널리 사용되고 있고 완전히 합법적 인 방법이지만 고급 미디어 상태에 대한 검사를 수행 할 수 없습니다.

여기서 기사를 마무리하는 것은 이전 방식으로는 달성 할 수 없는 유용한 예입니다. 미디어 쿼리를 사용하여 사용자가 가로 모드인지 확인합니다. 이 접근 방식은 HTML5 게임을 개발할 때 일반적이며 모바일 장치에서 가장 잘 보입니다.

https://codepen.io/rema/pen/xxVqarV 

https://css-tricks.com/working-with-javascript-media-queries/