미디어 쿼리 - 두 폭 사이

미디어 쿼리 - 두 폭 사이

CSS3 미디어 쿼리를 사용하여 너비가 400px보다 크고 900px보다 작을 때만 나타나는 클래스를 만들려고 합니다.저는 이것이 아마도 매우 단순하고 명백한 것을 놓치고 있다는 것을 알지만, 저는 그것을 이해할 수 없습니다.제가 생각해낸 것은 아래의 코드입니다, 도움을 주시면 감사하겠습니다.

@media (max-width:400px) and (min-width:900px) {
    .class {
        display: none;
    }
}

값을 전환해야 합니다.

/* No less than 400px, no greater than 900px */
@media (min-width:400px) and (max-width:900px) {
    .foo {
        display:none;
    }
}​

데모: http://jsfiddle.net/xf6gA/ (배경색을 사용하여 확인이 용이함)

@Jonathan Sampson 저는 당신이 여러 개의 @media를 사용한다면 당신의 해결책이 잘못되었다고 생각합니다.

다음을 사용해야 합니다(최소 너비 먼저).

@media screen and (min-width:400px) and (max-width:900px){
   ...
}

그냥 나의 것을 떠나고 싶었습니다..scss예를 들어, 저는 이것이 일종의 모범 사례라고 생각합니다. 특히 커스터마이징을 수행한다면 폭을 한 번만 설정하는 것이 좋다고 생각합니다!그것을 어디에나 적용하는 것은 현명하지 않습니다, 당신은 인적 요인을 기하급수적으로 증가시킬 것입니다.

당신의 피드백을 기다리겠습니다!

// Set your parameters
$widthSmall: 768px;
$widthMedium: 992px;

// Prepare your "function"
@mixin in-between {
     @media (min-width:$widthSmall) and (max-width:$widthMedium) {
        @content;
     }
}


// Apply your "function"
main {
   @include in-between {
      //Do something between two media queries
      padding-bottom: 20px;
   }
}

.class {
    display: none;
}
@media (min-width:400px) and (max-width:900px) {
    .class {
        display: block; /* just an example display property */
    }
}

언급URL : https://stackoverflow.com/questions/14008781/media-queries-in-between-two-widths