미디어 쿼리가 미디어 규칙을 업데이트 할 때 CSS 규칙 수정이 실패하는 이유

<head> 
    <style> 
     .cdm-tb { width: 960px; height: 90px; } 
    </style> 

    <script> 
     ChangeCssRule(".cdm-tb", "width", "468px"); 
     ChangeCssRule(".cdm-tb", "height", "60px"); 
    </script> 
</head> 

<body> 

    <img src='images/testimage.jpg' class='cdm-tb' alt='test' /> 

</body>

ChangeCssRule은 작동하는 JS 기능입니다. 그러나 몇 가지 미디어 쿼리를 .cdm-tb 스타일에 추가하면 CSS 규칙 업데이트가 더 이상 작동하지 않습니다.미디어 쿼리가 미디어 규칙을 업데이트 할 때 CSS 규칙 수정이 실패하는 이유

<style> 
     .cdm-tb { width: 960px; height: 90px; } 
     @media(min-width: 728px) {.cdm-tb { width: 728px; height: 90px; } } 
     @media(min-width: 960px) {.cdm-tb { width: 960px; height: 90px; } } 
    </style>

미디어 쿼리와 관련된 실행 순서가 있습니까? 모든 제안을 부탁드립니다.

출처

2013-09-23 Vincent James

테스트 사례를 만들 수 있습니까? http://jsfiddle.net/ – thirtydot

jsfiddle에 익숙하지 않아서 가능합니다. 다음은 테스트입니다. http://www.pcbuilderplus.com/test/index.html 및 http://www.pcbuilderplus.com/test/index2.html. 미디어 쿼리가 추가되었습니다. –

에 대한 메타 태그보기 포트를 추가해야하지만 주변에서 작품을 발견했다 : Generating CSS media queries with javascript or jQuery. 해결 방법은 적용된 이전 설정을 덮어 쓰려면 < STYLE> 태그 끝에 새로운 미디어 쿼리를 추가하는 것이 었습니다.

document.querySelector('style').textContent += 
      "@media(min-width: 468px) {.cdm-tb { width: 468px; height: 60px; } }";

출처

2013-09-23 21:54:18

<html> 
<head> 
<meta name="viewport" content="width=device-width"> 

</head> 
<style> 
body{background:#000000;} 
.cdm-tb { width: 960px; height: 90px; } 
@media screen (min-width: 728px) 
{ 
.cdm-tb { width: 728px; height: 90px;} 
} 

@media screen (min-width: 960px) 
{ 
.cdm-tb { width: 960px; height: 90px;} 
} 
</style> 
<img src='images/testimage.jpg' class='cdm-tb' alt='test' /> 

</html>

당신은 내가 기존 미디어 쿼리 값을 수정 할 수 없습니다 반응 디자인

출처

2013-09-23 17:37:04

미디어 쿼리가 미디어 규칙을 업데이트 할 때 CSS 규칙 수정이 실패하는 이유

답변

관련 문제