동적 미디어 쿼리

Question

현재 CSS j가 js/jq 크기 조정 이벤트를 사용하여 화면 너비가 너무 커지면 가로 너비 메뉴에 CSS 규칙을 적용합니다. 그러나 새 규칙이 적용되기 전에 메뉴가 잠시 랩됩니다.

이상적으로는 메뉴 너비를 측정하고 미디어 쿼리의 중단 점을 변경하고 싶습니다.

@media screen and (min-width: THIS-VALUE){ 
    New Rules 
} 

가능합니까 ??

미리 감사드립니다.

Chris GW 녹색

Answer 1

미디어 쿼리 대신 메타 태그를 사용해보십시오. 메타 태그에서는 min-width 속성을 사용할 수 있습니다.

메타 당신이 그 값을 변경할 수 있습니다 HTML 태그 인 경우에 당신이 그것을 좋아하는 방법으로 :

var element = document.getElementByTagName('meta')[0]; 

element.setAttribute('content','Value'); 

Example use of meta tag

당신은 프로그래밍 방식으로 미디어 쿼리 규칙을 만들 수 있습니다

Answer 2

-의 폭을 측정하여 활성화를 당신의 메뉴 (사용 JS/jQuery를)

document.querySelector('style').textContent += 
    "@media screen and (min-width:400px) { div { color: red; }}" 

검색어가 페이지 또는 화면 thoug 내의 요소의 변화 폭에 작동하도록 설계되지

미디어 h - 뷰포트/창 자체 및 기타 요인에 대한 변경 사항이 추가되었습니다. (전체 목록은 here을 찾을 수 있습니다)

다음, 당신이 겪고있는 '포장'을 이해하기 어렵다, 그래서하지만 수평 메뉴 '화면 오프 '를가는 경우 메뉴 코드를 게시되지

뷰포트의 백분율 (%) 너비로 메뉴를 설정하고 메뉴를 다시 그리는 자식 쿼리와 자식 요소를 변경/제거하는 일련의 미디어 쿼리를 사용하는 것이 더 편할 수도 있습니다. 특정 화면 너비에서 .