이제 12 년이 흐른 지금, 전 세계가 CSS3 미디어 쿼리 및 반응 형 디자인 시류에 뛰어들 때 문제가 남아 있습니다.자바 스크립트에서 CSS3 미디어 쿼리에 액세스
하나는 미디어 쿼리는 HTML 코드에서
존재하는 자바 스크립트에서 알 수있는 방법이 통과하는 간단한 요소해야하지만, 똑똑한 방법이있다? 등 모바일, 태블릿, 자바 스크립트 코드를 지원하기 위해 특수 코드 경로를 추가 할 수 있도록
효과 ...
(쿼리 true로 평가)? 결국 하나의 함수 isMobile()을 작성하여 작은 화면 영역과 관련된 특정 조치에 대한 플래그로 사용할 수 있습니다.
관심있는 각 미디어 쿼리에 대해 CSS에서 알려진 스타일을 얻는 페이지 내 특정 개체를 가질 수 있습니다. 그런 다음 해당 스타일을 getComputedStyle()과 함께 읽은 다음 할당 된 것을 확인하면 어떤 미디어 쿼리가 우선 순위가 있는지 알 수 있습니다.
"보이지 않는"스타일에 대한 아이디어 나는 힌팅을 사용할 수 있습니다.
에? 레이아웃에 영향을 미치지 않지만 getComputedStyles()를 통해 읽을 수있게되는 스타일? –절대적으로 '왼쪽 : -1000px'로 배치 된 div를 사용할 수 있습니다. 그것은 'position : absolute'이기 때문에 페이지의 레이아웃에는 영향을 미치지 않습니다. 그것은 'left : 1000px'이기 때문에 표시되지 않으며 스크롤바가 생기지 않습니다. 그런 다음 미디어 쿼리 규칙을 사용하여 CSS 너비를 설정하면 getComputedStyles()로 너비를 읽을 수 있습니다. jQuery는이 트릭을 사용하여 브라우저에 의해 배치 된 것이 필요할 때 상황을 계산하지만 보이지는 않습니다. – jfriend00
'document.styleSheets [i] .media [j]' – kirilloid