미디어 쿼리-두 너비 사이

미디어 쿼리-두 너비 사이

---

너비가 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){
   ...
}

---

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

---

방금 .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;
   }
}

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