자바 스크립트로 CSS 파일을 읽고 페이지를 동적으로 변경하십시오.

그래서 IE8에서는 CSS @media 쿼리가 작동하지 않습니다.자바 스크립트로 CSS 파일을 읽고 페이지를 동적으로 변경하십시오.

@media (min-width: 768px) { 
/* some css */ 
} 
@media (min-width: 972px) and (max-width: 1024px){ 
/* different css */ 
}

지금, 나는 IE_min768.css 및 IE_min972_max1024라는 이름의 별도의 CSS 파일을 생성하고 페이지 너비를 조정 동적으로 파일을로드하고 언로드 자바 스크립트를 사용할 수 있습니다. 하지만 그것은 D.R.Y를 위반합니다. 여러 곳에서 CSS를 유지하는 데 어려움이 있습니다.

실제로 CSS 파일을 읽고 @media 섹션을 감지하고 해당 CSS를 브라우저에 동적으로 적용하기 위해 Javascript (IE에서만)를 사용할 수 있습니까?

출처

2012-09-06 brentonstrine

"미디어 쿼리 지원이 부족한 것이 첫 번째 미디어 쿼리입니다." – Pointy

CSS를 DRY하려면'@ import'를 사용하면 되겠습니까? –

비슷한 게시물에 대한 자세한 정보 : http://stackoverflow.com/questions/7444658/best-solution-framework-to-responsive-design-for-ie7?rq=1 – Kostia

바퀴를 다시 발명하지 마십시오. respond.js을 사용해주세요. GitHub의에 대한 추가 정보에서

이 스크립트의 목적은 CSS3 미디어를 지원하지 않는 브라우저에서 반응 형 웹 디자인을 가능하게 빠르고 가벼운 (3킬로바이트 축소 된/1킬로바이트 gzip으로 압축) 스크립트를 제공하는 것입니다
검색어 - 특히 Internet Explorer 8 이하 그것은 아마도 다른 비 지원 브라우저에 대한 지원 패치를 작성하는 방식으로 작성되었습니다 (곧 이에 대한 자세한 정보가 나와 있습니다).

출처

2012-09-06 19:07:22

아름답게 작동합니다! 완성을 위해 respond.js의 작성자가 링크 한 [css3-mediaqueries-js] (http://code.google.com/p/css3-mediaqueries-js/)에 대해 언급하고자합니다. 내 CSS가 너무 복잡하지 않기 때문에 응답은 나를 위해 일하고있다. – brentonstrine

자바 스크립트로 CSS 파일을 읽고 페이지를 동적으로 변경하십시오.

답변

관련 문제