[css] 미디어 쿼리-두 너비 사이

Program / 글쓴이

너비가 400px보다 크고 900px보다 작은 경우에만 나타나는 클래스를 만들기 위해 CSS3 미디어 쿼리를 사용하려고합니다. 나는 이것이 매우 간단하고 명백한 것을 놓치고 있지만 알아낼 수는 없다는 것을 알고 있습니다. 내가 생각해 낸 것은 아래 코드이며 도움을 주셔서 감사합니다.

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

답변

값을 전환해야합니다.

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

데모 : http://jsfiddle.net/xf6gA/ (배경색을 사용하므로 확인하기가 더 쉽습니다)

답변

@Jonathan Sampson 여러 @media 를 사용하면 솔루션이 잘못되었다고 생각합니다 .

( min-width first )를 사용해야합니다 .

@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 */
    }
}

스 니펫 확장

답변