강제 미디어 쿼리가 적용되는

나는이 HTML과 CSS 코드를 가지고 : 지금은 래퍼 "와 같은-작은"클래스를 얻을 때마다, 심지어 경우, 작은 화면의 모든 스타일을 적용 할 것을 원하는강제 미디어 쿼리가 적용되는

<div class="wrapper"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div> 

@media all and (max-width: 400px), (max-height: 300px) { 
    .wrapper .a { 
     .... 
     .... 
    } 
    wrapper. .b { 
     .... 
     .... 
    } 
    .... 
    .... 
}

화면이 작지 않습니다. 미디어 쿼리 안에 css 코드를 복제하고 싶지 않습니다. 어떻게 해결할 수 있습니까?

다른 해결책은 강제로 미디어 쿼리를 적용하는 것입니다. 그것을 할 방법이 있습니까?

출처

2013-03-27 Naor

[* less *] (http://lesscss.org) 일 가능성이 있습니다. –

@JaredFarrish : 적은, 웅덩이 또는 스타일러스로 렌더링 된 CSS가 복제됩니다. – Naor

재미있는 질문입니다, 디버그 목적으로 만 사용합니까? – zessx

-1

해당 섹션에 동일한 클래스를 추가하십시오. A와 B가 자신의 사용자 지정 스타일 : 크롬의 최신 버전에서

출처

2013-03-27 09:41:58

"makeMeShine"이란 무엇입니까? 어떻게 이것이 미디어 쿼리에 연결되어 있습니까? .. – Naor

makeMeShine은 내가 추가 한 클래스 일뿐입니다. 예를 들어 .makeMeShine {background : red; }. Eveywhere 클래스 makeMeShine이 적용되면 배경색이 빨간색이됩니다. –

그리고 이것은 미디어 쿼리와 어떤 관련이 있습니까 ??? – Naor

을 가질 수

<div class="wrapper"> 
    <div class="makeMeShine a"></div> 
    <div class="makeMeShine b"></div> 
</div>

할 수 있습니다 "emulate" a mobile device/트리거 데스크톱 브라우저에서 미디어 쿼리를 시험하기 위하여한다. (Internet Exploder 11 has the same behavior!) 에뮬레이션을 적용한 후 브라우저를 새로 고쳐야 할 수 있습니다. Chrome 35은 관련 탭에서 새로 고침을 누르기 전까지는 부분적으로 미디어 쿼리를 적용합니다.

출처

2014-07-15 14:10:27 zedd45

자바 스크립트를 사용하면 다음과 같이 할 수 있습니다.

간단히 말해서 CSS에서 미디어 쿼리를 이동하고 window.matchMedia을 사용하여 JS에서 테스트합니다.

어떤 것이 일치하는지 알면 Modernizr과 비슷한 방법으로 <html> 태그에 className을 추가 할 수 있습니다. 전화기에서 <html class="like-small">을 볼 수 있습니다.

귀하의 CSS는 오히려 기본 미디어 쿼리를 사용하는 것보다, 그 편리한 클래스를 활용하기 위해 작성됩니다

.like-small wrapper.a {} 
.like-large wrapper.a {}

(나는 또한이 아니요 같은 소형,이 아니요 - 같은 -를 추가하려면 medium class를 <html>으로 변경하여 CSS를 더욱 간소화합니다.

이제 일반 미디어 쿼리가 일치하고 적절한 클래스 이름이 문서에 추가 된 후 RWD는 정상적으로 작동합니다. 특정 스타일을 강제 실행하려면 HTML 태그에서 classNames를 다시 작성하여 전체 페이지에 적용하거나 className을 부모 요소에 추가하여 페이지의 일부에만 영향을 줄 수 있습니다.

출처

2014-10-23 14:48:23 wwwmarty

나는이 질문이 오래되었다는 것을 알고 있지만 잘하면 이것은 (대답이 없었기 때문에) 당신이 찾고 있었던 것입니다. 또한 CSS에 특수성 클래스를 추가하면 CSS를 반복하지 않아도되는지 여부를 알 수 없습니다.

@media 쿼리의 정의를 변경하여 원하는 작업을 수행 할 수 있습니다. 기본적으로 화면이 값보다 작아지기를 원한다는 대신에 작은 화면 CSS OUT의 미디어 쿼리를 유지하고 큰 화면에 대해 미디어 쿼리를 설정하도록하십시오.

그런 다음 CSS를 호출하는 순서를 변경하고 클래스 like-small을 호출 할 스타일에 특수성을 추가하기 만하면됩니다.

HTML :

<div class="wrapper like-small"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div> 


<div class="wrapper"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div>

CSS :

.wrapper.like-small .a, 
.wrapper .a { 
     height:200px; 
     width:200px; 
     background:purple; 
    } 

.wrapper.like-small .b, 
    .wrapper .b { 
     height:200px; 
     width:200px; 
     background:blue; 
} 

@media all and (min-width: 400px), (min-height: 300px) { 
    .wrapper .a { 
     height:100px; 
     width:100px; 
    background:yellow; 
    } 
    .wrapper .b { 
     height:100px; 
     width:100px; 
    background:red; 
    } 
}

그리고 바이올린 : http://jsfiddle.net/disinfor/70n37hhj/

는 희망이 당신이 이상 년 반 전에 (후에 무엇인지입니다 :)

출처

2014-10-23 15:11:41 disinfor

자바 스크립트로 시도 할 수 있습니다.

$('meta[name="viewport"]').prop('content', 'width=400');

이이 대답에서 가져온 것입니다 : 누군가가 코멘트에 말했듯이 이 https://stackoverflow.com/a/20137580/1401341 , 이것은 단지 viewport 태그를 지원하는 브라우저에서 작동이 문장은 미디어 쿼리를 적용 할 수있는 뷰포트의 폭과 힘 브라우저를 설정합니다.

출처

2016-05-17 08:35:23 Fernando

강제 미디어 쿼리가 적용되는

답변

관련 문제